But wouldn't you rather say you made your own grid system?

Coding Your Own Grid System

Determine the maximum width from the design. In our case, that's 1170px. This will be used as a max-width on each row.

Calculate the gutter (the margin between columns) width as a percentage of the maximum width. In our case, that's 2.56% (or 30px/1170px).

Use a grid generator to generate the CSS. (But don't worry — we've done this for you!) Then reference these classes in your HTML.

Grid System HTML

Our grid CSS was generated with a grid generator, but the unneccessary CSS has been removed. Today we'll be focusing on using the grid system in the HTML.

Use the row class on each row of content:

<section class="row">
</section>

Within the row, use the column class and the width class (e.g. span_4_of_12) on each column of content:

<section class="row">
<div class="column span_4_of_12">
I'm the first of three columns!
</div>
<div class="column span_4_of_12">
I'm the second of three columns!
</div>
<div class="column span_4_of_12">
I'm the third of three columns!
</div>
</section>

Tip: To use multiple classes on a single element, separate each class with a space in your HTML as shown above.