LESS + Grid

Why

Traditionally CSS grids rely on a plethora of classes planted throughout your HTML; which isn't exactly a victory for the content/style segregation between HTML and CSS.

With (unofficial) CSS extensions like LESS or SASS you can 'mix in' the grid classes to get the simplicity of a grid system while keeping your HTML clean. However you've had to pre-compile your CSS somehow.

However, with less.js the CSS is compiled at render, so now not only can you use LESS during development without wanting to shoot yourself in the face, you can ship with it, giving you the ease of grid system without sacrificing the segregation of content and style.

How

Read Dimitri Fadeyev's entry on less.js to get an overview of what less.js can do and how to most effectively use it during development.

I use 1KB Grid because it's simple, but whichever grid system you chose, put all of it into your .less file, so that less.js knows about it, and make sure you include your .less file before less.js

Obviously this requires javascript, but given wellformed HTML, degrades gracefully. I've included all the styling in stylesheet.less. But for even better degredation, write only the grid definitions using LESS and the rest of your styling using traditional CSS or simply pre-compile the LESS and only use less.js during development.