Grids are one of the most fundamental systems in design. They take content and help you arrange it in logical divisions — creating rhythm, hierarchy, and consistency that a viewer feels even if they never consciously notice it.
Understanding grid systems isn't just academic. Whether you're designing a marketing page, a dashboard, or a mobile app, grids are what keep your layouts from feeling arbitrary. And if you're transitioning from graphic design to UI or from branding to UX, grid fluency is one of the first skills that transfers directly.
The anatomy of a grid
A grid system is built from a few core components:
- Guides — The edges you choose to align content with. They're invisible lines that create the boundaries of your layout.
- Columns — Vertical divisions of content. Most modern layouts use 4-column (mobile), 8-column (tablet), or 12-column (desktop) grids.
- Rows — Horizontal divisions, less commonly explicit but present in any vertically structured layout.
- Margins — The outer space surrounding your content area. They give the layout breathing room from the edge of the viewport or container.
- Gutters — The space between columns. Consistent gutter width is what makes multi-column layouts feel cohesive rather than cramped or scattered.
- Hang-lines — Horizontal guides that content aligns to from above. Common in editorial layout where images and text blocks need to start at the same vertical position.
- Baselines — The horizontal guide that text sits on. Baseline grids ensure that text across multiple columns aligns horizontally, creating visual harmony.
Why grids matter for digital design
In print, a grid helps you lay out a fixed composition. In digital design, grids do something harder: they create structure that adapts across screen sizes.
A responsive grid doesn't just shrink — it restructures. A 12-column desktop grid might collapse to 8 columns on tablet and 4 on mobile. The content reflows, but the proportional relationships hold because the underlying grid ratios are consistent.
This is why grid systems and design tokens are natural partners. When your spacing scale (margins, gutters, padding) is tokenized, your grid adapts consistently across breakpoints without ad hoc spacing decisions at each size.
Common grid patterns
Column grid — The most common. Content is placed within vertical columns with consistent gutters. Works for everything from article layouts to dashboards.
Modular grid — Adds horizontal divisions to create a matrix of cells. Useful for image galleries, card layouts, and any design where both vertical and horizontal alignment matters.
Baseline grid — An underlying horizontal rhythm (often 4px or 8px) that all elements snap to. This is what makes a layout feel "tight" — every element's height, padding, and margin is a multiple of the base unit.
Hierarchical grid — A non-uniform grid where column widths vary to create visual emphasis. Common in editorial design where a wide content column sits beside a narrower sidebar.
The relationship between grids and spacing systems
Grids and spacing tokens are two expressions of the same idea: consistent proportional relationships. Your grid defines the macro structure (how the page is divided). Your spacing tokens define the micro structure (how elements relate to each other within those divisions).
If you use a 4px base unit for your spacing scale, your grid gutters should be a multiple of that base (16px, 24px, 32px). Your margins should follow the same logic. When everything derives from the same base, the layout has a mathematical coherence that's felt as visual quality — even by people who couldn't explain why.
Practical application
When setting up a grid for a new project:
- Choose your base unit — 4px or 8px. Everything will be a multiple of this.
- Define your column count by breakpoint — typically 12/8/4 for desktop/tablet/mobile.
- Set gutter and margin widths as multiples of your base unit.
- Establish hang-lines for content sections that need horizontal alignment.
- Test with real content — grids that work with placeholder text often break with real headings, body copy, and images of varying aspect ratios.
The goal isn't rigidity. Grids are guides, not cages. The skill is knowing when to follow the grid and when to intentionally break it — and that judgment comes from understanding what the grid is doing for your layout in the first place.