Contents

Collection Gap

The vertical space between the rows of the collection.

Where to find it
Labelled Gap in the Collection Settings drawer (gear in the collection header).
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
Underlying CSS
gap

In plain English

The collection box always stacks its rows vertically, so Gap here is the vertical rhythm of the whole collection — the even space between one row and the next.

Unlike Margin, Gap does not add anything before the first row or after the last — only between them.

When you would use it

  • Rows are too close together or too far apart and you want one number for the whole collection.

How to change it

  1. Open Collection Settings, then "Gap", and pick a preset or enter a custom length.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Column Gap spaces items inside a single column. Row Gap spaces columns inside a row. Collection Gap spaces rows inside the collection.

Related settings

For developers

The technical reference for what this setting produces: MDN: gap. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next