Grid
Use a powerful mobile-first CSS grid to build layouts of all shapes and sizes thanks to a twelve column system
Enable Grid behavior
Using the .grid class will enable the CSS Grid behavior which uses display: grid; and a column template with 12 columns (fraction units).
<div class="grid"></div>Add Columns
By applying the class col-* with a number between 1-12 you can choose the column width.
Below are three columns, each with the class .col-4 applied. This will create a simple grid with 3 columns.
.col-4
.col-4
.col-4
<div class="grid">
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
</div>Define responsive grid
By applying the class col-[Breakpoint]-* with any number between 1-12 you can choose the column width for a specific screen width.
Test it by resizing the screen. Resizing it below 768px (MD) will stretch the columns to full width as col-12 is taking place.
.col-12 .col-md-4
.col-12 .col-md-4
.col-12 .col-md-4
<div class="grid">
<div class="col-12 col-md-4">.col-12 .col-md-4</div>
<div class="col-12 col-md-4">.col-12 .col-md-4</div>
<div class="col-12 col-md-4">.col-12 .col-md-4</div>
</div>