The Semantic Grid System
The Semantic Grid System is the page layout for tomorrow.
Set column and gutter widths, choose the number of columns, and switch between pixels and percentages. All without any .grid_x classes in your markup. Oh, and did we mention it’s responsive?
How does Semantic Grid work?
The Semantic Grid avoids presentational CSS classes in the HTML markup itself. Instead, it uses a parametric LESS mixin (or a SCSS or Stylus mixin, depending on which framework you prefer) to control the layout in the stylesheet where it belongs.
Below is an example of the LESS syntax, and the resulting CSS (which is remarkably similar to the 1KB CSS Grid):
Browser compatibility
The Semantic Grid System supports modern browsers as well as Internet Explorer 6 and up. Semantic.gs uses the micro clearfix to clear floats, which supports Firefox 3.5+, Safari 4+, Chrome, Opera 9+, and IE6+, though support for earlier versions of FireFox could easily be achieved by adding the `overflow: hidden;` method to the `.row` mixin.
The sub-pixel rounding issue is a well-known problem affecting fluid layouts in Internet Explorer 6 and 7. As of version 1.2, Semantic.gs includes a workaround to this issue (though it’s commented out by default).
