I agree with all the points you listed and that CSS layout is superior. However every time I use a CSS grid I find myself thinking whether the content and design are really separated. If I add classes like .col-1-4, .span3 or .three.columns to an element in the markup, doesn't that mix details specific to a certain design (or even one particular screen size in responsive design) with the content?
remind me of tables too. They tend to add a few unneeded or non-semantic div's. And they don't really separate content and design. It is a lesser-of-two-evils thing for me, because sometimes grids/frameworks can save me a lot of time. Ideally you'd use semantic-sounding classnames and don't include unnecessary div's.
I agree completely, which is why I'd say the solution is to use a grid framework based on Sass or LESS instead of vanilla CSS (I'm partial to Orbital[1], but I'm biased because I wrote it :P). If your column sizing can be applied via preprocessor mixins instead of CSS classes, it's easy to keep your HTML free from nasty non-semantic classes. If you hunt around on GitHub, many popular CSS grids have unofficial LESS/Sass ports as well.
