How to make gutter between columns in a CSS grid system

Question

Does anyone know how to make a 20px or 1em gutter for the grid system below?

I got all the divs to all go in a row but I want

Answer 1

Well, here is the calculation of the columns' width, base on the column number considering the gutter of 20px between each column.

For instance, col-2-12:

width: calc( (100% - (12/2 - 1) * 20px) / 12 * 2 );

Explanation:

width:
    (100%   /* Total width */
      - (12/2 - 1) * 20px /* Number of gutters between col-2  x  gutter width */
    ) / 12 /* Total columns */
      * 2  /* Size of the current column which is col-2 */

Also, instead of using margin for the first and the last column, you can use padding for the container .row and set the margin for that columns to 0.

In addition, as the columns are floated, you should clear the float at the bottom of the .row element.

.row {
    padding: 0 20px;
    *zoom: 1;
}

.row:after, .row:before {
    content: ' ';
    display: table;
}

.row:after { clear: both;}

.row > [class*='col-']:first-child { margin-left: 0; }
.row > [class*='col-']:last-child { margin-right: 0; }

WORKING DEMO.

Sassy CSS

Using CSS preprocessors such as Sass, makes the calculation of grid systems fun!

Here is the Sassy way of a fluid grid system:

$total_columns : 12;
$total_width   : 100%;
$gutter_width  : 2%;

.row {
    padding: 0 $gutter_width;
    *zoom: 1;

    &:after, &:before { content: ' '; display: table; }
    &:after { clear: both; }

    & > [class*='col-']:first-child { margin-left: 0; }
    & > [class*='col-']:last-child { margin-right: 0; }
    & > [class*='col-'] { margin: 0 $gutter_width/2; }
}

[class*="col-"] {
    float:left; min-height:200px;
    background-color: #dedede; border: 1px solid #000;
}

@for $i from 1 through $total_columns {
    .col-#{$i}-#{$total_columns} {
        width: (100% - ($total_columns/$i - 1) * $gutter_width) / $total_columns * $i;
    }
}

ONLINE DEMO.