Curious to see how well this works in actual projects. The CSS looks easy to set up but the html syntax looks really strange.
This looks nice but for me it's not clear how this works with RWD? For example, the markup describes how the columns are set up (1 of 6, etc) but what happens when you want to change that at a particular breakpoint and the markup now doesn't describe the layout?
CSS Wizardry grids and Gridset are the only systems I have seem that have got this right.
Does anyone have more insight on how well this grid works? Does it work as well as it seems?
It looks like it's using percentage widths and display: inline-block to make the grid items stay on the same line... The centered column is reset to be "display: block" with "auto" for left and right margins.
The page causes horizontal scrolling for me when the window is resized in Safari/Chrome.
The thing that's tricky about this is that each grid item has a rule of "background-clip: content-box" ... If you disable this rule you'll see that the grid backgrounds are all screwed up because the gutters are created by padding on each grid item, and background normally covers padding. What this means is that you probably want to use an extra div within each grid item to handle backgrounds. Background-clip is unsupported in IE8.