Gutter
The consistent gap between grid columns or neighboring elements. The space that keeps things apart without a line.
See it
What it is
The gutter is the consistent gap between grid columns or neighboring elements: the space that separates things without drawing a line. The word comes from print, where the gutter was the channel between columns of type and the inner margin swallowed by a book's spine.
In CSS it is 'gap' (or 'column-gap' and 'row-gap') on a grid or flex container, which is why one value on the parent beats sprinkling margins on every child. Typical web gutters run 16px on phones and 24 to 32px on desktop, stepping up at breakpoints so a 12-column grid does not feel cramped on a wide screen.
Gotcha: gutters and outer margins are different measurements and people constantly conflate them. The gutter is between columns, the margin is the breathing room at the page edges, and they rarely want the same number. Pull both from your spacing scale so the whole page agrees, and remember gap applies between items only, never outside the first and last.
Ask AI for it
Set up consistent gutters on this layout: use CSS Grid with a single gap value on the container instead of margins on children. Use a 16px gutter below 640px, 24px from 640px to 1024px, and 32px above that, driven by a --gutter custom property so every grid on the page shares one value. Keep the page's outer side padding as a separate token, and do not add extra margin to the first or last item.