Skip to content
Layout

gap

Sets the spacing between rows and columns in grid, flex, and multi-column layouts.

2,008 effects in the catalog use this property.

Syntax

gap: <row-gap> <column-gap>;

Watch out

Unlike margin-based spacing, `gap` adds space only between items. It does not create extra space before the first or after the last item.

Effects using gap

These are working effects from the catalog. Open a tile to inspect the full source.