Grid System
The grid is based on a 12-column layout. Simply set the class .grid on the direct container and use the classes .grid-col-[1-12], .grid-col-static and .grid-col-flex to define the layout of your columns.
Grid layout
Here is the complete display of the behaviors of the grid classes on a 12 columns' layout.
.grid-col-12
.grid-col-6
.grid-col-6
.grid-col-6
.grid-col-3
.grid-col-3
.grid-col-4
.grid-col-4
.grid-col-4
.grid-col-4
.grid-col-8
.grid-col-3
.grid-col-3
.grid-col-3
.grid-col-3
.grid-col-3
.grid-col-9
.grid-col-2-5
.grid-col-2-5
.grid-col-2-5
.grid-col-2-5
.grid-col-2-5
.grid-col-2
.grid-col-2
.grid-col-2
.grid-col-2
.grid-col-2
.grid-col-2
.grid-col-2
.grid-col-2
.grid-col-4
.grid-col-2
.grid-col-2
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
.grid-col-5
1
1
.grid-col-2
.grid-col-7
1
1
.grid-col-3
.grid-col-static , will adapt to its content.
.grid-col-flex, will fill the remaining space.
Grid usage
You can find here some examples of layouts using the grid system. A child of a .grid can itself welcome a new .grid as a child, and so on.
.grid-col-12
.grid-col-6
.grid-col-6
.grid-col-6
.grid-col-6
.grid-col-6
.grid-col-6
.grid-col-4
.grid-col-6
.grid-col-6
.grid-col-4
.grid-col-12
.grid-col-4
.grid-col-flex
static
.grid-col-12
.grid-col-6
.grid-col-6
.grid-col-6
.grid-col-12
.grid-col-6
.grid-col-4
.grid-col-4
.grid-col-4
.grid-col-static
.grid-col-flex