Use Grids as a System for Creating Hierarchy
Visual Design · hierarchy
Updated 2026-07-28
- Do not treat grids as a collection of equal columns. A good grid creates relationships between content and helps users understand what matters most.
- Use column ratios to create hierarchy:
- 4 + 8 creates a supporting area and a dominant content area.
- 6 + 6 creates equal balance between two sections.
- 3 + 9 creates strong emphasis by pushing focus toward one side.
- Remember that the same content can communicate a completely different message depending on the grid structure. Layout is not just placement—it is visual storytelling.
- Make responsive behavior a grid decision. When screens shrink, the grid should adapt rather than disappear:
- 12 columns can become 6.
- 6 can become 4.
- 4 can become 1.
- Choose gutters intentionally. The space between columns affects the personality of the design:
- 8px gutters feel compact and technical.
- 24px gutters feel balanced and comfortable.
- 40px gutters feel spacious and editorial.
- Do not treat gutter size as a default value. Spacing choices influence rhythm, density, and the overall feeling of the interface.
- Know when to break the grid. Intentional exceptions create emphasis:
- A hero image extending edge to edge.
- A pull quote breaking outside the normal content boundary.
- A visual element that intentionally escapes the structure.
- A grid is not a limitation. It is a framework for creating consistency, hierarchy, and contrast. The best designers know both how to follow the grid and when to break it with purpose.
Related guides
UX Handbook