A gutter in layout design is the empty space between the columns, and often the rows, of a grid. It separates adjacent blocks of content so that text, images and components read as distinct units while still belonging to one coherent structure. In print design, the word also names the inner margin where facing pages meet at the binding, a related but separate use within page layout.
Gutters are one of the three basic measurements of any grid system, together with column width and outer margins. Their size is a deliberate design decision: too narrow and neighboring columns blur together, too wide and the layout falls apart into isolated fragments.
How gutters work in a layout grid
A gutter works by creating a consistent channel of white space that the eye uses as a boundary. In a column grid, the total layout width equals the sum of all columns, all gutters and both outer margins, so changing the gutter changes the width available to every column.
For a layout with n columns there are n minus 1 internal gutters. A 12-column grid in a 1,200-pixel container with 24-pixel gutters therefore spends 264 pixels on gutters and leaves 936 pixels for columns, or 78 pixels per column. Elements that span several columns also absorb the gutters between them, which is why a six-column element is wider than six column widths alone.
In a modular grid, horizontal gutters separate rows of modules as well. Horizontal gutters are often aligned with the baseline grid, typically as a whole multiple of the line height, so that text in adjacent modules stays on the same baselines.
Gutter sizes and the factors behind them
There is no universal gutter size, but practical ranges are well established. Gutter width should scale with type size, column width and viewing distance, because the space must be large enough to separate text yet small enough to keep related content connected.
| Medium | Typical gutter | Main consideration |
|---|---|---|
| Mobile screens | About 16 to 20 px | Limited width, columns must stay usable |
| Tablet screens | About 20 to 24 px | Balance between density and separation |
| Desktop screens | About 24 to 32 px | Wider columns allow more space |
| Magazine and book text columns | About 4 to 6 mm | Separating lines of running text |
| Large posters and signage | Larger, scaled to viewing distance | Legibility from far away |
A common rule of thumb in print is a gutter at least equal to the line height of the body text, often expressed as about one em or slightly more. On screens, many design systems choose gutters as multiples of a base unit, such as 16, 24 or 32 pixels on an 8-point grid, which keeps spacing consistent across components.
Gutter compared with margin and padding
Gutters, margins and padding are all forms of spacing, but they sit in different places in the layout hierarchy. Confusing them leads to double spacing, misaligned edges and grids that break at certain widths.
| Term | Location | Function |
|---|---|---|
| Gutter | Between columns or rows | Separates neighboring content blocks |
| Margin | Between the grid and the page edge | Frames the whole layout |
| Binding gutter | Inner margin at the spine of a book | Keeps text clear of the fold |
| Padding | Inside a component, around its content | Separates content from its own border |
| Alley | Space between modules, mainly in print | Older term often used like gutter |
The binding gutter in print is usually wider than the outer margin would need to be, because a book that does not lie flat curves the inner part of the page toward the spine. Thick perfect-bound books often need several millimeters of extra inner space to keep text readable.
Gutters in responsive and CSS layouts
On the web, gutters are implemented most cleanly with the CSS gap property, which adds space only between grid or flex items, never before the first or after the last one. Older methods relied on margins or padding on each column, which required negative margins on the container to cancel the outer spacing.
| Approach | Behavior | Typical use |
|---|---|---|
| CSS gap on grid | Space between rows and columns | Modern page and card layouts |
| CSS gap on flexbox | Space between flex items | Rows of components and toolbars |
| Column padding | Half-gutter on each side of every column | Older grid frameworks |
| Fixed gutters, fluid columns | Gutter stays constant while columns stretch | Most responsive grids |
| Fluid gutters | Gutter scales with viewport | Editorial layouts with large screens |
Most responsive grids keep gutters fixed per breakpoint and let columns stretch, then step gutters up at larger breakpoints. Fluid gutters defined in viewport units or with clamping functions can give smoother scaling but need minimum and maximum limits to avoid cramped mobile layouts or excessive gaps on wide monitors.
Common gutter mistakes
The most frequent problem is inconsistent gutters, where components add their own margins on top of the grid and the space between columns varies from section to section.
- Gutters narrower than the line spacing, which makes adjacent text columns read as one line.
- Equal gutters and margins on mobile that leave too little width for content.
- Double spacing caused by combining CSS gap with column margins.
- Ignoring the binding gutter in print, which pulls text into the spine of a bound document.
- Background colors filling gutters, which hides the grid and weakens separation.
Defining gutters as named spacing tokens in a design system prevents most of these issues, because every component and page template refers to the same values.
In simple terms
A gutter is the empty space between columns on a page or screen. In a newspaper, it is the white strip that keeps one column of text from running into the next. It helps your eyes see where one block ends and the next begins.
Think of gutters like the aisles in a supermarket. Without them, the shelves would form one confusing wall. With aisles of the right width, everything is easy to find and still feels like one store.
A practical example
A design team rebuilds an online news site whose article cards look cramped on phones and scattered on large monitors. The old layout used fixed 10-pixel gutters at every screen size, created with margins on each card.
The team defines a 4-column mobile grid with 16-pixel gutters, an 8-column tablet grid with 24-pixel gutters and a 12-column desktop grid with 32-pixel gutters. They implement every grid with the CSS gap property and remove all card margins, so spacing comes from one source only.
The redesigned pages show clearly separated cards at every width, headlines no longer visually merge across columns, and new templates can be added without anyone guessing spacing values.