A grid is a promise

A grid isn’t decoration. It’s a promise to the reader that things will line up, that similar items will sit in similar places, and that the page won’t surprise them for no reason.

I set the grid early, usually right after the first type decisions. Twelve columns on a wide screen, fewer on smaller ones, with gutters that match the spacing scale. Then I try to break it as rarely as possible.

Rules that survive real content

Grids are easy to respect in a mock-up, where every title is the right length and every image is the right shape. Real content is messier. A project name runs to three lines, or a photo arrives in portrait instead of landscape.

So I test with awkward content on purpose. The longest title I can imagine, a missing image, a summary that’s far too short. If the layout holds up, the grid is doing its job. If it falls apart, I’d rather find out now than after launch.

Spacing is part of the grid

Columns get most of the attention, but the vertical rhythm matters just as much. I pick a small set of spacing steps and use them everywhere: between a label and its title, between sections, around images.

With a fixed set, decisions get faster. I’m choosing between a few known gaps instead of nudging things by a pixel until they look right. The page ends up calmer, because the same distances repeat and the eye learns them.

When something looks off, the spacing is usually where I find the reason. A gap that doesn’t match any step stands out once you know the steps, and fixing it is often all a section needs.

When to break it

Breaking the grid can be powerful, but only when it’s rare. One image that runs wider than the text column feels deliberate on a calm page. Five of them just look like the grid was never there.

Most of the time, the best compliment a grid can get is that nobody notices it. The page feels ordered and easy to read, and people get on with the content. That’s the promise kept.