5

I've been a bit confused how responsive web design plays along with CSS grid systems like 960.gs.

Nathan Smith (the creator or 960.gs) came up with adapt.js some time ago, and by examining the bundled stylesheets (mobile.css, 720.css and 960.css to name a few) it's clear that the number of grid columns is untouched, only the widths of the individual columns and the way they stack together change.

978.gs on the other hand seems to follow a different pattern:

  • the 300px grid has 8 columns
  • both the 748px and 978px grids have 12 columns
  • both the 1218px and 1378px grids have 16 columns

At first, I though this didn't make much sense so I talked to the developer about it. He replied by stating that it's common practice to serve different CSS and different markups depending on the device width.

This approach still seems a bit strange to me, because if you're willing to rewrite your whole HTML markup you might as well use the same grid system (16 for instance) and just change all your .grid_{x} classes to .grid_{x*2} to accommodate smaller screens... Right?

The adapt.js approach seems easier to implement and manage, but I can spot a few caveats too: how will an image or snippet of text fit nicely inside a grid_3 class? Being that its width can range from auto, to 220px to even 610px in the 2520.css variant?

So, what is the current best practice regarding responsive web design and grid systems? And should CSS media queries affect the grid (column widths)? As it is, I'm inclined to believe that the best approach might be to serve a single markup and stylesheet and let the browser do it's rendering / scaling.

I'm pretty green at this, so any help is appreciated -- thanks.

Alix Axel
  • 151,645
  • 95
  • 393
  • 500
  • 2
    This is a very subjective question, and probably belongs in chat or somewhere else. However, you may want to look into the [Golden Grid System](http://goldengridsystem.com/) – bookcasey Dec 11 '11 at 17:52
  • @bookcasey: Interesting link, thanks. The baseline grid and the elastic gutters look like good ideas, but the number of grid columns appears to be governed by the HTML markup (which was my conception of the wrong way to go). – Alix Axel Dec 11 '11 at 18:27
  • Different markups? Maybe for huge websites or very specific ones or if you maintain it yourself, but that's not sth I'm going to do in my web agency. Media Queries are simple and sufficient enough for 95% of the websites out there. – FelipeAls Dec 11 '11 at 20:36
  • @FelipeAlsacreations: But do you use grid systems with a fixed number of columns? – Alix Axel Dec 11 '11 at 21:53

0 Answers0