No gap
←The special gutter class .gap-no gives a border-collapsed look.
In this case the direct childs of .flex can be styled, no need for an extra encapsulated padding-div.
SCSS:
_flex.scss
_gap-no.scss
No gutter .flex.gap-no
<h3 class="flex wrap-no">
<span>No gutter</span>
<span class="span-auto text-thin text-mono">.flex.gap-no</span>
</h3>
<div class="flex gap-no ma-t_s">
<div class="span-fifth box text-clip text-mono bg-b"> </div>
<div class="span-fifth box text-clip text-mono bg-c"> </div>
<div class="span-fifth box text-clip text-mono bg-d"> </div>
<div class="span-fifth box text-clip text-mono bg-e"> </div>
<div class="span-fifth box text-clip text-mono bg-f"> </div>
<div class="span-third box text-clip text-mono bg-g"> </div>
<div class="span-third box text-clip text-mono bg-h"> </div>
<div class="span-third box text-clip text-mono bg-i"> </div>
</div>