siimple 3.2.0 siimple.xyz
Grid
Use our responsive grid system with twelve columns.
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.