There are a few CSS grid systems out there, some as part of frameworks, some stand alone, most of which use a column system – splitting the overall container width into a number of columns and then using classes like
col-2 to give an element a width equal to 2 columns.
Quite early on in my HTML coding days, I got to grips with percentage widths in CSS so I find these columns a bit too removed from the actual width and the relative dimensions of elements in a design.
Instead, I like using fractional CSS classes to define widths, e.g.
width_half which applies the CSS
width: 50%;, and started re-using these classes in various projects… which led to this mini CSS framework.
It provides classes like
w_1_8 which give an element a width of one half and one eighth of it’s container respectively.
Combined with a border box reset which I first read about here and simple container, row and gutter classes, it makes for a simple and small CSS grid system.
It’s on BitBucket if anyone is interested: CSS Percentage Grid System