The modern homepage
Hero, feature bands, and a card row of different heights — the canonical hierarchical grid, expressed in CSS.
Typography · content-led zones · complex layout
The hierarchical grid
The other grids impose a structure and fit the content to it. The hierarchical grid does the opposite: it reads the content first, sizes each zone by how much it matters, and fits a structure around them. It is the loosest and most demanding of the four classic grid types — irregular by design, yet held together by hidden alignment and rhythm. Almost every modern homepage is one. Here is what it is, how to build it without it collapsing into chaos, and how to use it as an overlay.
- Type
- Content-led zone grid
- Structure
- Irregular, by importance
- Taxonomy
- 4th of Samara's grids
- Difficulty
- Advanced
- Held by
- Alignments + baseline
- Also known as
- Complex / organic grid
See the hierarchical grid on five layout categories
‹›
A homepage: a wide header, a dominant hero zone, two stacked feature panels, and a three-up row below. The zones are different sizes by importance, but the dashed lines show the few shared alignments that hold them together.
What the overlay shows
The overlay marks zones — rectangular regions of different sizes — and the alignment lines that relate them. Unlike a modular grid, there is no repeating field of equal cells; the zones are sized to the content, with the most important element claiming the largest area. What keeps the page from looking random is the second layer: a small set of shared edges that several zones snap to, plus a common baseline rhythm running through all the text.
As an overlay it is a planning and checking tool. You sketch zones whose proportions express the content hierarchy, then use the alignment lines to test whether the irregular regions still talk to one another — whether the hero's left edge lines up with the feature row below, whether the gutters are consistent, whether every text block shares one rhythm. Grid Maker Pro lets you draw freeform zones and drop alignment guides, so you can design intuitively and verify rigorously in the same view.
Two kinds of line appear in the overlay, and the difference between them is the whole idea. The solid edges are the zone boundaries, sized to the content. The dashed lines are the shared alignment guides — the handful of common edges that several zones snap to. A healthy hierarchical grid has many zones but only a few alignment lines; when the dashed lines start to outnumber the solid ones, the structure has lost its discipline and is drifting toward arbitrary placement. Reading the ratio between the two is the quickest way to judge whether an irregular layout is genuinely holding together or just looks busy.
The structure, briefly
A hierarchical grid has no single formula — it is governed by two principles in tension:
zone size ∝ content importance (intuitive)
shared alignment lines + one baseline (rigorous)
The first principle is proportional and judged by eye: the hero is large because it matters most, a caption is small because it matters least, and the relative areas encode the hierarchy.1 The second is the discipline that rescues the freedom — Timothy Samara describes the hierarchical grid as built on "the intuitive placement of elements" but stresses that those placements must still be reconciled to a few common alignments and a consistent rhythm, or the page disintegrates.1 On the web this maps cleanly: each zone becomes its own small flex or grid layout, while shared container widths and a global spacing scale provide the alignments.4 The maths is loose; the craft is in resolving the tension.
History — where it comes from
Verified
Naming the intuitive. Designers built irregular, content-led layouts long before anyone catalogued them — early-modern broadsides, Dada and Constructivist posters, and mid-century magazine spreads all fit zones to content. The contribution of modern theory was to name the form: Timothy Samara's Making and Breaking the Grid sets out the four-part taxonomy — manuscript, column, modular, hierarchical — that gives this loosest type a place in the system.1 Ellen Lupton's Thinking with Type and Beth Tondreau's Layout Essentials use the same categories in teaching.23
The web turn. The hierarchical grid is the native structure of the contemporary web page. Khoi Vinh's Ordering Disorder and Mark Boulton's writing on web grids show how a homepage's stacked, differently sized bands are a hierarchical grid expressed in CSS — disciplined by a shared container and spacing system rather than a fixed field.47
Honest caveats
It is the easiest grid to do badly. Because it permits irregularity, it is often mistaken for a licence to place things anywhere. Without the alignment discipline it becomes the cluttered, arbitrary layout it superficially resembles.5
It is not a beginner's grid. Müller-Brockmann's case for the regular grid was partly that it protects less-experienced designers from exactly this trap.6 The hierarchical grid rewards judgement, which means it punishes its absence.
When to use it (and when not)
| If you want to... | Use the hierarchical grid | Don't use it for... | Difficulty |
|---|---|---|---|
| Design a homepage or landing page | Zones of different heights match sections of different weight | Uniform, repeating listings (use a modular grid) | Advanced |
| Lay out a magazine feature spread | The dominant image and pull quotes claim the space they deserve | Continuous running text (use a manuscript grid) | Advanced |
| Make a poster with strong hierarchy | Size signals importance directly through zone area | Tabular or data-uniform content (use modules) | Intermediate |
| Build a portfolio or case-study page | Each project gets a zone scaled to its prominence | Strict catalogues where items are equal (use modules) | Advanced |
| Express a clear content priority visually | The structure itself carries the hierarchy | Layouts where you want calm uniformity (use a regular grid) | Advanced |
Where the hierarchical grid does its work
Six contexts. The editorial and web uses are documented practice; the readings are analysis.
Magazine feature spread
A dominant opening image with text and pull quotes arranged in zones of decreasing weight around it.
Constructivist posters
Rodchenko and El Lissitzky sized and angled zones by force of message — hierarchical grids before the name existed.
Landing pages
Stacked full-width bands of varying height — hero, benefits, social proof, call to action — sized by persuasive priority.
Design portfolios
Featured projects get large zones, supporting work smaller ones, so the page states its priorities at a glance.
News & content sites
A lead story dominates while secondary items take smaller zones — a hierarchy of attention built into the structure.
Common mistakes
1
Mistaking freedom for no rules
Treating "content-led" as permission to place anything anywhere produces clutter. The hierarchical grid is irregular, not arbitrary.
Fix: design the zones intuitively, then impose a few shared alignment lines and one baseline rhythm to reconcile them.
2
Too many alignment lines
If every zone has its own unique edges, nothing aligns with anything, and the page loses the cohesion that makes irregularity work.
Fix: limit yourself to a small set of shared edges that many zones snap to; reuse alignments deliberately.
3
Sizes that don't match importance
If a minor element gets a big zone and the key message a small one, the structure lies about the hierarchy and confuses the reader.
Fix: rank the content first, then make zone area follow that ranking honestly.
4
Abandoning the baseline rhythm
With irregular zones, dropping a shared vertical rhythm removes the last thread tying the page together, and the text in different zones drifts out of relation.
Fix: keep every text block on one baseline rhythm; the looser the structure, the more that rhythm matters.
How different disciplines use it
For web designers
The hierarchical grid is the default structure of the modern page. Plan a homepage as a stack of zones — hero, features, proof, call to action — each sized by importance, each its own small flex or grid layout. The discipline that keeps it coherent is a shared container width, a global spacing scale, and a consistent baseline. Vinh's and Boulton's web-grid thinking is the practical reference here.
For editorial designers
Feature spreads are where the hierarchical grid shines in print: a dominant opening image, a headline, a deck, pull quotes, and body text all arranged in zones of decreasing weight. The art is letting the lead element take the space it deserves while still aligning the supporting zones to a few shared lines so the spread reads as one composition, not a collage.
For poster & brand designers
Posters live or die on hierarchy, and sizing zones by force of message is exactly what the Constructivists did. Use the overlay to test that the most important word or image genuinely dominates the field and that the secondary information aligns cleanly beneath it. For brand work, a documented hierarchical system lets each piece be expressive while sharing a recognisable alignment language.
For students
Learn the regular grids first, then this one — the hierarchical grid assumes you already have the judgement the others teach. Practise by analysing a strong homepage or poster with the overlay: find the few alignment lines hiding inside an apparently free layout, and the baseline rhythm under the varied zones. Recognising the discipline behind the irregularity is the whole lesson.
"The hierarchical grid is based on the intuitive placement of elements... yet even the most spontaneous arrangement benefits from being reconciled, after the fact, to a rational set of alignments."
After Timothy Samara, Making and Breaking the Grid (2002)1
Frequently asked questions
What is a hierarchical grid?
A grid whose structure is determined by the content rather than by a regular repeating field. It divides a page into zones of different sizes, proportioned by the importance of what they hold, and aligned by a small number of shared lines. It is the loosest of the standard grid types, sometimes called a complex or organic grid.
How is it different from a modular grid?
A modular grid imposes a regular field of equal cells, and content adapts to it. A hierarchical grid does the reverse: the content's importance dictates irregular zones, and the grid is fitted around them. Modular is regular and content-agnostic; hierarchical is irregular and content-led.
Where does the hierarchical grid come from?
It is the fourth category in the standard grid taxonomy — manuscript, column, modular, hierarchical — set out most clearly in Timothy Samara's Making and Breaking the Grid. It names the intuitive, proportionally judged structures designers have always built for posters and complex pages.
How do I keep it from becoming chaos?
By disciplining the freedom. Limit the number of distinct alignment lines, keep all text on one baseline rhythm, and make sure the zone sizes genuinely reflect a content hierarchy. It is intuitive in placement but rigorous in alignment — that tension is what stops it collapsing.
When should I use a hierarchical grid?
When the content is genuinely irregular and a regular field would fight it — magazine feature spreads, poster layouts, complex homepages, and landing pages with several different-sized sections. It is right when importance varies sharply between elements.
Is a hierarchical grid good for the web?
Yes — most modern homepages and landing pages are hierarchical grids: a tall hero, then bands of different heights for features, testimonials, and calls to action. CSS lets each zone be its own small layout, which is exactly how a hierarchical grid is meant to work.
Does it still need a baseline rhythm?
More than ever. Because the zones are irregular, a shared baseline rhythm and a few common alignment lines are often the only things tying the page together. The looser the structure, the more the underlying rhythm has to work.
Is a hierarchical grid just "no grid"?
No. "No grid" is arbitrary placement; a hierarchical grid is deliberate, proportional, and aligned — it just isn't regular. The discipline is hidden in the alignments and the rhythm rather than displayed as an even field.
References
- Samara, T. Making and Breaking the Grid: A Graphic Design Layout Workshop. Rockport Publishers (2002). ISBN 1-56496-893-6.
- Lupton, E. Thinking with Type. Princeton Architectural Press (2004). ISBN 978-1-56898-448-3.
- Tondreau, B. Layout Essentials: 100 Design Principles for Using Grids. Rockport Publishers (2009). ISBN 978-1-59253-472-2.
- Vinh, K. Ordering Disorder: Grid Principles for Web Design. New Riders (2010). ISBN 978-0-321-70353-9.
- Roberts, L. & Thrift, J. The Designer and the Grid. RotoVision (2002). ISBN 2-88046-538-X.
- Müller-Brockmann, J. Grid Systems in Graphic Design. Verlag Niggli (1981). ISBN 3-7212-0145-0.
- Boulton, M. A Practical Guide to Designing for the Web. Five Simple Steps (2009). ISBN 978-0-9561740-1-7.
- Elam, K. Grid Systems: Principles of Organizing Type. Princeton Architectural Press (2004). ISBN 1-56898-465-0.
Notes from the studio · Three practitioners on the hierarchical grid
Illustrative composites of how the tool gets used in practice — not quotes from named individuals.
I rank the content before I draw a single box. The zones just follow the ranking — the grid is the argument about what matters.
The trick on a feature spread is the hidden alignment. Let the hero image be huge, but snap three quiet edges and the whole thing reads as composed.
I teach it last. Hand a beginner this grid and you get chaos; hand it to someone who knows alignment and rhythm and you get the best pages in the class.
Open the Hierarchical Grid overlay
Drop a layout. Block out zones by importance, then reconcile them to a few shared alignments. Free, in your browser.
Launch Grid Maker Pro →