Gaps
←Control the vertical and horizonral space between grid container childs with gutter classes.
Caution: the gap spaces add app up to the container width. Overflow will happen, when the grid container get’s smaller than the sum of all gaps.
Syntax:
.gap_{size}
SCSS:
_grid-gaps.scss
Extra small gap
.grid.gap_xs
Small gap
.grid.gap_s
Medium gap
.grid.gap_m
Custom gap
.grid.gap-custom
<h4 class="flex wrap-no">
<div>Extra small gap</div>
<div class="span-auto text-thin text-mono">.grid.gap_xs</div>
</h4>
<div class="grid gap_xs ma-t_s text-mono">
<div class="box text-clip bg-b span-3"> </div>
<div class="box text-clip bg-c span-3"> </div>
<div class="box text-clip bg-d span-3"> </div>
<div class="box text-clip bg-e span-3"> </div>
<div class="box text-clip bg-f span-4"> </div>
<div class="box text-clip bg-g span-4"> </div>
<div class="box text-clip bg-h span-4"> </div>
</div>
<h4 class="flex wrap-no ma-t_m">
<div>Small gap</div>
<div class="span-auto text-thin text-mono">.grid.gap_s</div>
</h4>
<div class="grid gap_s ma-t_s text-mono">
<div class="box text-clip bg-b span-3"> </div>
<div class="box text-clip bg-c span-3"> </div>
<div class="box text-clip bg-d span-3"> </div>
<div class="box text-clip bg-e span-3"> </div>
<div class="box text-clip bg-f span-4"> </div>
<div class="box text-clip bg-g span-4"> </div>
<div class="box text-clip bg-h span-4"> </div>
</div>
<h4 class="flex wrap-no ma-t_m">
<div>Medium gap</div>
<div class="span-auto text-thin text-mono">.grid.gap_m</div>
</h4>
<div class="grid gap_m ma-t_s text-mono">
<div class="box text-clip bg-b span-3"> </div>
<div class="box text-clip bg-c span-3"> </div>
<div class="box text-clip bg-d span-3"> </div>
<div class="box text-clip bg-e span-3"> </div>
<div class="box text-clip bg-f span-4"> </div>
<div class="box text-clip bg-g span-4"> </div>
<div class="box text-clip bg-h span-4"> </div>
</div>
<!-- Set your own grid gaps -->
<h4 class="flex wrap-no ma-t_l">
<div>Custom gap</div>
<div class="span-auto text-thin text-mono">.grid.gap-custom</div>
</h4>
<div class="grid gap-custom ma-t_s text-mono">
<div class="box text-clip bg-b span-3"> </div>
<div class="box text-clip bg-c span-3"> </div>
<div class="box text-clip bg-d span-3"> </div>
<div class="box text-clip bg-e span-3"> </div>
<div class="box text-clip bg-f span-4"> </div>
<div class="box text-clip bg-g span-4"> </div>
<div class="box text-clip bg-h span-4"> </div>
</div>