Contents

Gap

The space between the items inside the column, when the column arranges them in a row or grid.

Where to find it
Labelled Gap in the "Selected Column" section of the Modify drawer.
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

Gap sets the space between things that sit side by side inside the column. Where Margin puts space around the outside of a box, and Padding puts space inside its edges, Gap puts even space between siblings — and it does not add anything before the first item or after the last.

That last detail is why gap is so much tidier than margins for lists of things. With margins you end up fighting an unwanted space at one end; with gap you set one number and the spacing is even throughout.

The catch is that gap only works when the column is a flex or grid container. Gap alone does not turn the column into one — set Horizontal Alignment, Vertical Alignment, Flex Wrap, Align Content, or Flex Direction first so the column becomes a flex container.

When you would use it

  • A component lays out several items in a row and they are too close together.
  • You want even spacing in a list without an unwanted margin at the start or end.

How to change it

  1. Select the column, open "Selected Column", then "Gap".
  2. Click a spacing diagram for a common size, or enter a custom number and unit.
  3. You can use the same value for all resolutions, or set phone / tablet / desktop separately.
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

  • Gap has no effect unless the element is a flex or grid container. Set a flex layout control above Gap if nothing appears to change.
  • To change the space between the columns of a row, use the row's Gap setting under Entire Row. Gap here applies inside a single column.

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