Gap

The gap controls allow you to easily adjust the spacing between elements within a box.

Gap is an easier way to uniformly control spacing between an elements contents. This is a quick and easy way to set and manage consistent margins between all items found within a box.

Row gap

Row gap refers to the distance between elements stacked on top of each other.

Column gap

Column gap refers to the distance between elements placed next to each other.

Examples

The most common example of using gap is for sections containing multiple elements or cards. Simply select the smallest corresponding box that contains all the elements you’re looking to space out, and utilize your row and column gap controls.

Pro tips

For a list or grid of elements with equal spacing, use the gap control instead of margin or padding. This will ensure consistent and easy to manage spacing between elements.