Gap

Utilities for controlling gutters between grid rows and columns.

Class	Properties
.gap{size}	gap: {size};
.gapx{size}	column-gap: {size};
.gapy{size}	row-gap: {size};

Usage

Use gap{size} to change the gap between both rows and columns in grid layouts.

Changing row and column gaps independently

Use gapx{size} and gapy{size} to change the gap between rows and columns independently

Responsive

To control the gap at a specific breakpoint, add @{breakpoint} the end of the utility.

Variants

All gap values can be adjusted via the $scale in _settings.scss.