Demo: http://intzone.com/1200gridwithrows/
Initial CSS generated from Variable Grid System - http://www.spry-soft.com/grids/
Based on 960 Grid System (licensed under GPL and MIT) - http://960.gs/
This is for a grid 1200px in width, with 20 columns, each column being 40px in width (usable space) and having a margin of 10px on the left and right, which creates a gutter space of 20px in between columns. The first and last columns are 10px away from the edge of the grid.
One difference from the 960 Grid System is that classes for rows are defined as well, with the row heights following the column widths. Each row has a margin of 10px on the top and bottom, creating a gutter space of 20px in between rows. The first and last rows are 10px away from the edge of the grid. There are 20 row sizes to choose from, based on a viewport of 1200 x 1200.
As of June 2012, about 90% of web users can view websites within 960 x 600, with 20% of web users still on 1024 x 768. Following the trend on gs.statcounter.com, the no. of web users on 1024 x 768 will drop to 10% by 2015, which is when we can start designing websites viewable within 1200 x 600.
The 1200 grid is to prepare for the future. Meanwhile, it still can be used for designing websites within 960 x 600, with additional space on the sides for advertisements or left blank.
Rules that just use the widths and heights without margin, float, position have been added for use in table cells, block elements, images, etc. as it is difficult at times to do a layout with float involved. The equivalent for .col_1 is .width_col_1, for .row_1 it is .height_row_1 and so forth.