CSS Percentage Grid System

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_2 and 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

Leave a Reply

Your email address will not be published. Required fields are marked *