Free Hierarchical Grid Generator

Some content has no underlying rhythm. A newspaper front page has one lead story, two secondary ones and a scattering of briefs, and the relationship between them is not a ratio of module counts — it is an editorial judgement made fresh every day.

A hierarchical grid, sometimes called a compound or freeform grid, starts from that judgement. Zones are sized by how much attention their content deserves, and the resulting structure is deliberately irregular.

The six zones drawn here are a worked example of the pattern rather than a universal template. Hero occupies 15.4% of the frame, Aside 10.9%, Rail 8.6%, Footer B 8.3%, Feature 7.5% and Footer A 6.8%. Those are six distinct values, and the spread between the largest and smallest is more than two to one.

Adding them gives 57.6%. The remaining 42.4% of the page is space between the zones — and in a hierarchical layout that space is not a uniform gutter. It varies, and its variation is part of the composition: on the same page, two zones close together read as related where two far apart read as separate sections.

That is the property a regular grid cannot have. A modular grid's gutters are all the same by construction, so relatedness has to be signalled some other way — a rule, a background tint, a heading. A hierarchical grid can signal it with proximity alone, which is the cheapest and most immediate signal available.

The result — a regular substrate carrying an irregular composition — is the standard newspaper solution and it is still the best one. A hierarchical grid is not the absence of structure; it is a second layer of structure above a regular one.

Web design rediscovered the same problem in the 2000s and arrived at the same answer. A landing page has one primary action and several supporting ones, and giving them equal visual weight demonstrably reduces conversion. The now-standard hero-plus-supporting-blocks pattern is exactly this grid.

The zone names here follow that convention. Hero is the primary content. Aside is the tall secondary block. Feature and Rail are supporting. Footer A and B are the lower band. Named zones matter more than they look: a team that can say "put it in the rail" is having a different and much faster conversation than one pointing at a screen.

Wireframing is where the pattern gets its main use. A hierarchical grid at wireframe stage forces the hierarchy decision early, when it is cheap, rather than at visual design stage when it is expensive. If two pieces of content are both claiming the Hero zone, that is a content problem, and finding it in a wireframe is a much better outcome than finding it in a comp.

There is a real risk with hierarchical grids and it is worth naming plainly: without the discipline of a module, they drift. The gaps between zones start out considered and, after three rounds of revision, are whatever the last edit left them. A regular grid resists that; a hierarchical one does not.

The standard defence is to build the hierarchical zones on a fine underlying grid, so that every zone edge still lands on a common line even though the zones are unequal. Newspapers do exactly this. It gives you irregularity where it matters and regularity where it does not.

The other risk is that hierarchy is not the same as imbalance. A page where one element is enormous and everything else is tiny does not read as hierarchical; it reads as unfinished. The spread here — from 15.4% down to 6.8%, a range of about 2.3 to 1 — is a working example of a hierarchy that is legible without being lopsided.

For print, the hierarchical grid appears in magazine feature openers, annual report spreads and any poster with more than one message. In all of them the job is the same: to tell a reader what to look at first without saying so in words.

The scale control expands or contracts the whole set about the centre. It exists because the zone proportions are fixed relative to each other, so a single number is enough to fit the pattern to a different page shape — which is what you need when moving between a screen layout and a printed one.

The labels can be turned off, and should be for anything other than wireframe and review work. In a construction drawing they are essential; in an export that will sit under a design they are clutter.

The most productive use is diagnostic. Lay the zones over a layout you have already made and see whether your content falls into a hierarchy at all. A page where everything is roughly the same size is telling you that you have not decided what matters, and that is a decision no grid can make for you.

The second use is comparative. Set the scale to fit, look at the page, and ask whether the zone your most important content lands in is the largest one. It very often is not, and the mismatch between intended and actual hierarchy is the single most common problem in layouts made without one.

The grid draws over your own image rather than exporting a fixed template because the whole question is about specific content. An abstract zone diagram tells you nothing; the same diagram over your actual page tells you whether your hierarchy is working.

The export sizes itself from the paper format and the DPI you choose rather than from your screen. SVG keeps every zone as an editable rectangle, so the pattern can become a wireframe layer that you move and resize rather than a fixed picture.

Everything runs in your browser. Images you load are never uploaded, because there is no server for them to reach. The drawing, the transform and the export all happen on your own machine.