DzinerHub

DzinerHub

Gutter

The spacing between grid columns that controls rhythm and readability.

Gutter

The spacing between grid columns that controls rhythm and readability.

In Web & Mobile Design

What is a Gutter?

A gutter is the spacing between grid columns that creates rhythm, separation, and breathing room for content.

When to use Gutters?

- To improve scannability and prevent visual crowding

- To separate columns and establish a clear reading rhythm across breakpointsWhen not to use Gutters? - In edge-to-edge designs where intentional density or immersion is requiredWhat is the anatomy of Gutters?

- Fixed or fluid sizes per breakpoint

- Relationship to column width and outer margins

- Vertical rhythm alignment with baseline grid