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 arranging its children in a row or a grid. For a component that just renders a single block of text or one image, this setting has nothing to space out and will appear to do nothing.

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. Enter a number and choose a unit.
  3. If nothing changes on the canvas, the column is not laying its children out in a row or grid, and Margin or Padding is the setting you want instead.
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. This is the most common reason it appears to do nothing.
  • To change the space between the columns of a row, use the row's Horizontal Alignment (options like "space-between") or a Margin on each column. 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