Gaps
←Use gutter classes from .gap_xs to .gap_xl to control the space between the objects.
There is no flex-gap property (yet?), so the gutters are based on a negative margin on the grid container and paddings for it’s direct child elements. Direct childs need to be nested one level. The benefit: In contrast to CSS Grid gaps, even large gaps are no problem. Downsides: There is no gap-default here, so you’ll need to set one. Margin-collapsing might appear in certain situations.
SCSS:
_flex-gaps.scss
Extra small gap .flex.gap_xs
Small gap .flex.gap_s
Medium gap .flex.gap_m
Large gap .flex.gap_l
<h4 class="flex wrap-no">
<span>Extra small gap</span>
<span class="span-auto text-thin text-mono">.flex.gap_xs</span>
</h4>
<div class="flex ma-t_s gap_xs">
<div class="span-fifth"><div class="box text-clip text-mono bg-b"> </div></div>
<div class="span-fifth"><div class="box text-clip text-mono bg-c"> </div></div>
<div class="span-fifth"><div class="box text-clip text-mono bg-d"> </div></div>
<div class="span-fifth"><div class="box text-clip text-mono bg-e"> </div></div>
<div class="span-fifth"><div class="box text-clip text-mono bg-f"> </div></div>
<div class="span-third"><div class="box text-clip text-mono bg-g"> </div></div>
<div class="span-third"><div class="box text-clip text-mono bg-h"> </div></div>
<div class="span-third"><div class="box text-clip text-mono bg-i"> </div></div>
</div>
<h4 class="ma-t_l flex wrap-no">
<span>Small gap</span>
<span class="span-auto text-thin text-mono">.flex.gap_s</span>
</h4>
<div class="flex ma-t_s gap_s">
<div class="span-fifth"><div class="box text-clip text-mono bg-b"> </div></div>
<div class="span-fifth"><div class="box text-clip text-mono bg-c"> </div></div>
<div class="span-fifth"><div class="box text-clip text-mono bg-d"> </div></div>
<div class="span-fifth"><div class="box text-clip text-mono bg-e"> </div></div>
<div class="span-fifth"><div class="box text-clip text-mono bg-f"> </div></div>
<div class="span-third"><div class="box text-clip text-mono bg-g"> </div></div>
<div class="span-third"><div class="box text-clip text-mono bg-h"> </div></div>
<div class="span-third"><div class="box text-clip text-mono bg-i"> </div></div>
</div>
<h4 class="ma-t_l flex wrap-no">
<span>Medium gap</span>
<span class="span-auto text-thin text-mono">.flex.gap_m</span>
</h4>
<div class="flex ma-t_s gap_m">
<div class="span-fifth"><div class="box text-clip text-mono bg-b"> </div></div>
<div class="span-fifth"><div class="box text-clip text-mono bg-c"> </div></div>
<div class="span-fifth"><div class="box text-clip text-mono bg-d"> </div></div>
<div class="span-fifth"><div class="box text-clip text-mono bg-e"> </div></div>
<div class="span-fifth"><div class="box text-clip text-mono bg-f"> </div></div>
<div class="span-third"><div class="box text-clip text-mono bg-g"> </div></div>
<div class="span-third"><div class="box text-clip text-mono bg-h"> </div></div>
<div class="span-third"><div class="box text-clip text-mono bg-i"> </div></div>
</div>
<h4 class="ma-t_l flex wrap-no">
<span>Large gap</span>
<span class="span-auto text-thin text-mono">.flex.gap_l</span>
</h4>
<div class="flex ma-t_s gap_l">
<div class="span-fifth"><div class="box text-clip text-mono bg-b"> </div></div>
<div class="span-fifth"><div class="box text-clip text-mono bg-c"> </div></div>
<div class="span-fifth"><div class="box text-clip text-mono bg-d"> </div></div>
<div class="span-fifth"><div class="box text-clip text-mono bg-e"> </div></div>
<div class="span-fifth"><div class="box text-clip text-mono bg-f"> </div></div>
<div class="span-third"><div class="box text-clip text-mono bg-g"> </div></div>
<div class="span-third"><div class="box text-clip text-mono bg-h"> </div></div>
<div class="span-third"><div class="box text-clip text-mono bg-i"> </div></div>
</div>