The Grid

The grid is the most powerful idea in layout, and the most misunderstood. Designers talk about it constantly; clients and readers never think about it at all. That invisibility is the point. A grid that users notice is a grid that has failed.

What a grid actually is

A grid is a set of vertical columns that elements snap to. The canonical web grid has twelve columns because twelve divides cleanly by one, two, three, four, and six — giving you a large vocabulary of layouts: full-width, halves, thirds, quarters, two-thirds-plus-one-third, and so on. Twelve columns is not a rule. It is a convention that emerged because it is useful.

Each column has a fixed width. Between columns is the gutter — a gap that columns cannot cross. At the edges of the grid are margins — breathing room between the grid and the viewport edge. Together, columns, gutters, and margins define the available space for all content.

Why alignment creates trust

When a headline aligns to the same left edge as the body text below it, and both align to the same edge as the card grid further down the page, something happens psychologically: the page feels considered. The reader cannot articulate why. They have not noticed the alignment itself. But they perceive the coherence it produces, and they experience that coherence as care, quality, or professionalism.

Misalignment has the opposite effect. When elements fail to share a common edge, they create micro-moments of visual friction. Each one is small. Accumulated across a page, they produce a feeling of sloppiness that erodes trust in the content.

Fixed vs fluid vs CSS Grid

Early web grids were fixed-pixel systems built on floats. Bootstrap’s twelve-column grid made this pattern universal. Modern CSS Grid renders most of that complexity irrelevant. display: grid lets you define columns, gutters, and responsive behaviour in a handful of lines. The concept — columns, gutters, alignment — remains identical.

Fluid grids use percentage widths so columns scale with the viewport. CSS Grid can produce both fixed and fluid grids. The underlying question is always the same: how do these columns change at different viewport widths?

Grid vs Flexbox: when to use each

CSS Grid and Flexbox are not competing — they solve different layout problems and are most powerful when combined.

Flexbox distributes space along a single axis (row or column). It is content-first: it sizes items based on their content and the available space. Use Flexbox for: navigation bars (a row of items with one pushed to the far edge), card rows that should wrap, any layout where items need alignment along one dimension.

CSS Grid divides a container into rows and columns simultaneously. It is layout-first: you define the structure, then place content into it. Use Grid for: page-level composition (sidebar + main, header + content + footer), any layout where items need to align across both axes at once, and the column grid system described in this hub.

/* Flexbox: navigation bar */
nav { display: flex; gap: 1rem; align-items: center; }
nav .logo { margin-right: auto; } /* pushes other items right */

/* Grid: page layout */
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

In practice: use Grid at the page-layout level (the grid system), Flexbox at the component level (button internals, card layouts, form rows). Neither replaces the other, and nesting them is correct and common.

Grid as shared language

The most underrated function of a grid is communication. When a design team agrees on a twelve-column, 24px-gutter, 48px-margin system, every conversation about placement becomes precise. “Move that to the fourth column” means something. “That element should span six columns” is unambiguous. Without a grid, every layout decision is a negotiation from scratch.

For teams building across multiple pages, grids also enforce consistency automatically. Elements designed by different people at different times land in the same rhythm because the grid makes it the path of least resistance.

Read next: Columns and Gutters — the anatomy of the grid in detail.

When to break this

The grid creates trust by making alignment structural rather than arbitrary. Breaking it destroys that trust — unless the break itself communicates something.

When you might break it:

• Full-bleed imagery — photographs that sit within a column feel contained. The same photograph at the viewport edge conveys scale and atmosphere. Breaking to the edge works when the image is the emotional content of the page.
• Data visualisations — charts, graphs, and maps have inherent proportions dictated by their data. Forcing them into column widths distorts the information they carry. The data’s structure takes precedence over the grid’s.
• Hero and campaign moments — on a landing page or editorial feature, a single element that breaks the grid — a large typographic treatment, an oversized number — can create a focal point that strict grid adherence would suppress.

If you do:

• Hold everything else to the grid with extra care. A single off-grid element in a tightly structured layout reads as deliberate. The same element in a loosely structured layout reads as error. The contrast is what makes the break legible.
• Break to a consistent edge — the viewport, a half-viewport, a defined bleed — not to an arbitrary pixel value. Even off-grid elements should align to something.

Grid alignment versus asymmetrical intent is a named conflict in the Conflict Matrix, including when the break reads as personality and when it reads as error.