Using Multiple Grids in one site?

[ethanmiller]

Hi All, I have a question about the advisability of using a set of grids on a site. I am working with a designer who used gridsetapp as a basis for his design. What he ended up with was three different grids each for tablet and desktop and then one grid for mobile.

I’m not sure if this is advisable to use multiple grids on one site. This is the first truly responsive site I am building and when I’ve thought about it before, I always imagined using one grid and then transforming that grid for different viewport sizes.

My questions are then: do you all you multiple grids when designing responsive sites? Or is there a simpler way to go about this, using one grid? Should I encourage this designer to rethinking this a bit? Or is this the way to go, and if so, is there some best practice about how to handle the shifting of grids between different types of pages?

I know that’s a lot, but I’m just wondering how others have gone about this…

[Paulie_D]

>I always imagined using one grid and then transforming that grid for different viewport sizes.

This designer is just coming up with the look, right? If that’s the case, how you implement it is up to you.

If this app outputs CSS then you can just incorporate that into your media queries. Or am I missing something?

[ethanmiller]

@Paulie_D of course yes I can control how I implement it. The question was more about how I *should* implement it. I.e. does it make sense to use a whole series of different grids, or is this a bad practice when it comes to responsive design. The gridset app does output code and I’m trying to decide whether to adapt it or take a different route…

[Paulie_D]

The ‘grids’ as I understand it are just widths at certain breakpoints aren’t they?

If in desktop mode a column is 50% width of the page but in tablet it’s 30% then that’s media query stuff.

I’m not sure how you would actually implement multiple grid frameworks into a site without a huge amount of conflicting styles.

[ethanmiller]

That was my concern as well. Basically, the different grids just involve a different set of column widths. [Here’s](http://i.imgur.com/abbgiaO.png) two of them.

The first here is meant to be used on the site’s front page. The second would apply to all inside pages, i.e. details of say a news post (single post in wordpress).

[Paulie_D]

Frankly, this sounds like a template/PHP issue as there are two distinct page types.

[Author]

Posts