Using a grid system allows you to rapidly develop web layouts within the browser. Meaning you can focus more on your design work and less on your CSS code.
Grid.Systema.tically is designed to be incredibly lightweight, consisting of a small CSS file (the less columns you specify, the smaller the file size is).
With only columns and margins to worry about, it is incredibly easy to understand and get started using Grid.Systema.tically to layout your web pages
Grid.Systema.tically's design is based on that of the grids you would normally use in InDesign. Making the transition from print to screen design easier.
This is the container for the grid system. By default it is aligned to the left. All grid elements must be within this, however there is nothing to stop you from using more than one of these grid containers in your page.
This is the class attribute for each individual element within the grid system. There are three variables you will need to specify:
The number of columns the grid element spans.
The number of columns to the left of the element to be white space (essentially how many columns the left margin of the item should span). This value can be from 0 to (the number of columns in the system − 1). (see fig.1)
Either y or n (for yes or no, respectively). Should the margin include the gutter gap to the far left of the margin? You can use this to handle elements sitting on the left of a parent element to avoid double margins. (see fig.2)
This element acts as a clearing element. Because all content elements are floated, it is necessary to include this to make sure parent elements expand to fit their child elements vertically. (see fig.3)