Horizontal gaps
←The gutter size alters horizontal and vertical spacing at the same sizing ratio by default. In certain scenatios you want the horizontal and vertical gap spacing to differ.
So you can combine that standard gap classes with an additional horizontal gap class that will overwrite only the horizontal value.
Syntax:
.gap-h_{size}
SCSS:
_grid-gaps.scss
Horizontally smaller gap
.grid.gap_xs.gap-h_s
Vertically smaller gap
.grid.gap_s.gap-h_xs
<h4 class="flex wrap-no">
<div>Horizontally smaller gap</div>
<div class="span-auto text-thin text-mono">.grid.gap_xs.gap-h_s</div>
</h4>
<div class="grid gap_xs gap-h_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>Vertically smaller gap</div>
<div class="span-auto text-thin text-mono">.grid.gap_s.gap-h_xs</div>
</h4>
<div class="grid gap_s gap-h_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>