Building a grid | siimple css

Building a grid

A guide for building a grid

Create a new div element and add the siimple-grid class using the class attribute.

<div class="siimple-grid"></div>

For each row of your grid, you must add a new div element with the siimple-grid-row class.

<div class="siimple-grid">
    <div class="siimple-grid-row"></div>
</div>

For each cell, add a div element with the class siimple-grid-col inside the row div. Also, you must specify the cell size adding a siimple-grid-col--COLUMN, where COLUMN is an integer from 1 to 12 that specifies the column size.

Remember that the column sizes must add up to twelve for a row.

For example, if you want a grid with two columns just add two div elements with the class siimple-grid-col--6:

<div class="siimple-grid">
    <div class="siimple-grid-row">
        <div class="siimple-grid-col siimple-grid-col--6">Cell 1</div>
        <div class="siimple-grid-col siimple-grid-col--6">Cell 2</div>
    </div>
</div>

Now your grid is ready to use!

Cell 1

Cell 2

<div class="siimple-grid">
    <div class="siimple-grid-row">
        <div class="siimple-grid-col siimple-grid-col--6">Cell 1</div>
        <div class="siimple-grid-col siimple-grid-col--6">Cell 2</div>
    </div>
</div>

Found a mistake or want to help improve this documentation? Suggest changes.