Design Atlas
한국어
▦ Layout

Gutter

거터

The fixed gap between columns in a grid or multi-column layout — not the columns themselves, but the space between them.

Also known as: Column gapGrid gutter
···
html
<div class="stage">
  <div class="cols" id="cols"></div>
  <div class="readout" id="readout">gap: 24px</div>
</div>
css
.stage{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(92%,480px)}
.cols{display:grid;grid-template-columns:repeat(6,1fr);width:100%;height:min(58vmin,170px)}
.cols b{background:var(--surface);border:1px solid var(--line);border-radius:6px}
.cols b:nth-child(odd){background:color-mix(in oklab,var(--accent) 16%,var(--surface))}
.readout{font-family:ui-monospace,monospace;font-size:clamp(11px,2vmin,14px);color:var(--muted)}
js
const cols = document.getElementById('cols');
const readout = document.getElementById('readout');
for (let i = 0; i < 6; i++) cols.appendChild(document.createElement('b'));
const values = [4, 24, 44, 24];
let i = 0;
function apply() {
  const v = values[i % values.length];
  cols.style.gap = v + 'px';
  readout.textContent = 'gap: ' + v + 'px';
  i++;
}
apply();
setInterval(apply, 1300);

The term traces back to print, where inner margins had to be left for binding. On the web, gutter width is set independently of column width so content doesn't read as cramped together no matter how many columns there are.

In CSS it's just the gap property (formerly grid-gap): display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px. Flexbox supports gap now too, so the old trick of zeroing out margin-right on the last column is no longer needed.

Too narrow a gutter and columns read as one blob, losing the grid structure; too wide and elements in the same row look unrelated. A common range is a quarter to a third of the column width, or a multiple of the 8pt grid (16px, 24px).