How to make custom css grid system

Every web developer know that having a good grid system is very useful for building  a modern Internet website layout,  a grid system in percentage is the best thing for responsive design.

There are a lot of css grid frameworks that help us make a good layout (960 grid system, Blueprint, YUI Grids, and more). Also this operation can be easy with Less or Sass but sometimes you want just something very easy.

In this article I explain how is simple to create a custom CSS grid system.

At the end of the page there is an Excel document that builds automatically all the CSS style you need, so if you don’t want to spend time to read the rest you could go directly to the end :-).

Building the custom CSS grid system

For build a good grid systems you needs at least of 3 parameters:

1. the max width of the page (pixel, percentage, points);
2. the number of columns (12,20,40,…);
3. the margin between columns (usually margin-right, 2px, 5%, …).

For example if you need an 800 pixel width page with 20 columns, one column must be 40px (800/20),
but if you need spacing like margin-right between columns, each column must be 35.25px .

Here is the simple mathematical formula for doing that:

• maxWidth = the width of the grid system;
• colums = the number of the columns;
• spacing = the spacing between columns;
• colN = the “width number” of the column that you want to know the value (column 1, column 2, column 3, …).

for the column 2 the result will be:

the result is 75.5px .

More about css grid

If you check the previous result  you could better understand why a lot of grid systems have a specific style for remove the last margin space.

75,5 is the width of “2 col style”, with 10 (=20/2)  of them we are able to reach the 100% of the total page width: 75,5 x 10 = 755 ;
then we should add all the 5px space for each column: space x number of “2 col style” = 5 x 10 = 50;
at the end the result will be 755+ 50= 805.

This is the explaination about to have a specific style for removing the last margin space.

Download

Css_generator (10k .zip)