Basic grid
←This is the bare naked grid. The content containers are wrapping over multiple implicit rows. This example makes no sense for daily usage, but it shows you the underlying structure of the grid.
You can customize the number of columns by adjustng the CSS Var --grid-cols. This looks similar to the Flexbox basic grid, but is different.
Syntax:
.grid
SCSS:
_grid.scss
Standard 12 columns grid
Custom number of grid columns
<h3 class="ma-b_s">
Standard 12 columns grid
</h3>
<div class="grid gap_s">
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
</div>
<h3 class="ma-b_s ma-t_m">
Custom number of grid columns
</h3>
<div class="grid gap_s custom">
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
<div class="box span-1"> </div>
</div>