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