Grids: when to follow them and when to break them

A layout grid is a set of invisible columns and gaps that elements on a page align to. You never see it, but you feel it. When things line up, a page looks calm and trustworthy. When nothing quite lines up, it looks improvised, even if every individual element is well designed.

But grids are not only about strict alignment. Some of the most memorable layouts break their grid in a few carefully chosen places. The trick is knowing which is which: when the grid should be followed without question, and when stepping outside it adds something.

What a grid is made of

A typical web grid has three parts:

• Columns: vertical divisions of the content area. Twelve is common because it divides neatly into halves, thirds, quarters and sixths.
• Gutters: the gaps between columns. These keep content from touching and create a consistent rhythm.
• Margins: the space between the outer columns and the edge of the screen.

There is often also a maximum content width. On a very wide monitor, the grid stops growing at some point and the extra space becomes margin, so lines of text do not stretch endlessly.

On smaller screens the grid usually changes: perhaps eight columns on a tablet and four on a phone, with narrower gutters and margins.

Why grids help

They make decisions faster

Without a grid, every element's width and position is a fresh decision. With one, you choose how many columns something spans. A feature section might use three cards of four columns each. A text block with an image might use seven columns for text and five for the image. The options are limited, which is exactly what makes them useful.

They create alignment across the whole page

When a heading in one section starts at the same left edge as a paragraph three sections further down, the page reads as a single, organised piece. Readers rarely notice consciously, but they notice when it is missing.

They make pages consistent with each other

When every page uses the same grid, the site feels like a coherent whole. A visitor moving from a services page to a contact page does not feel the layout shift under them.

Setting up a simple grid

For most small business sites, something like this works well:

1. Choose a maximum content width. Somewhere around 1100 to 1280 pixels suits most layouts.
2. Use twelve columns on desktop. It gives you the most flexibility.
3. Pick a gutter size from your spacing system. 24 or 32 pixels is a common choice.
4. Set outer margins. On phones, 16 to 24 pixels on each side keeps text away from the edges.
5. Reduce columns on smaller screens. Four columns on a phone is typical, which in practice means most content spans the full width.

Then decide some standard spans you will reuse. For example, body text might always span eight columns centred, or seven columns aligned left, to keep line lengths comfortable. Cards might span four columns on desktop, six on tablet and all four on phone.

When to follow the grid strictly

Some content should almost always stay on the grid.

• Body text. Paragraphs should start at a consistent left edge. Readers rely on it to find the start of each line and each section.
• Forms. Labels and fields aligned to the same edges are far easier to scan and complete.
• Repeated items. Product cards, team members, service listings and blog previews should share the same widths and gaps. Inconsistency here looks like a mistake.
• Navigation. The header and footer content should align with the page content below, so the site feels anchored.
• Anything practical. Opening hours, price lists, timetables and contact details benefit from strict, predictable alignment.

If in doubt, follow the grid. A page that follows its grid everywhere may be a little plain, but it will never look broken.

When breaking the grid adds something

Breaking the grid deliberately can create energy, focus and personality. It works best when the rest of the page is strongly aligned, because the break only reads as intentional if there is a clear order to depart from.

Full-bleed images and colour bands

Letting an image or a band of colour run edge to edge across the whole screen, beyond the content width, is the most common and safest grid break. It gives a page moments of scale and helps separate sections. An architect's site might let a single wide photograph of a finished building span the screen between two tightly aligned text sections.

Overlapping elements

An image that slightly overlaps a coloured panel, or a quote card that sits half over a photograph, adds depth and a sense of craft. Keep overlaps purposeful and limited to one or two per page.

Offset placement

Placing an image so it starts a column or two in from where you might expect, or aligning a short pull quote to an unusual column, creates a more editorial feel. A ceramicist's portfolio might offset product photographs in a staggered pattern so the page feels like a gallery wall rather than a catalogue.

Oversized type

A large headline or number that extends wider than the surrounding text column can act as a striking visual anchor, particularly on landing pages or event sites.

How to break the grid without making a mess

• Break it on purpose, not by accident. If something is off-grid, you should be able to say why.
• Break it rarely. One or two departures per page feel deliberate. Breaks in every section feel chaotic.
• Keep text on the grid even when images leave it. Readers still need a reliable reading edge.
• Align the break to something. An overlapping image can still start on a grid column, even if it extends past the container. Breaking one rule while respecting another keeps the layout coherent.
• Check it on mobile. Many grid breaks do not translate to narrow screens. Overlaps can become collisions, and offsets can waste precious width. Often the best mobile version simply stacks everything.

A quick way to check your grid

Turn on a column overlay if your design tool or browser extension supports one, or temporarily add faint vertical lines in your stylesheet. Then scroll through each page and look for elements that almost align but do not: a heading a few pixels off, a card wider than its siblings, an image that starts in a slightly different place. These near misses are worse than deliberate breaks, because they look like errors.

Grid checklist

• A maximum content width is set.
• Columns, gutters and margins are defined for desktop, tablet and phone.
• Gutters use a value from your spacing system.
• Body text, forms and repeated items align strictly.
• Header and footer align with the page content.
• Any grid breaks are deliberate, limited and explainable.
• Text stays on the grid even when images break out.
• Breaks have been checked and simplified on mobile.

The grid is a framework, not a cage. Follow it for everything that needs to be read and used, then step outside it in a few chosen places, and the page will feel both organised and alive.