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