CSS grids

The short version

CSS grids can be an easy way to incorporate a grid system in to your web designs. Below is an example of a responsive 12 column grid, divided in a number of ways.

First, add your generated CSS code in to the CSS section of your site.

Each blue rectangle below is a row. You can make any html element a row by setting it's class to 'row'.

Add elements inside of your row with a class following this format: 'col-#', where '#'' is equal to the number of columns the element should span.

The featured code section shows how to set up the first row below.

 
<div class="row">
    <div class="col-4">
    </div>
    <div class="col-4">
    </div>
    <div class="col-4">
    </div>
</div>
 
.col-4
.col-4
.col-4
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-6
.col-3
.col-3
.col-6
.col-1
.col-2
.col-3
.col-9
.col-1
.col-2
.col-5
.col-5
.col-2