Grid system

A grid gives a layout its underlying order. Text blocks, images and cards line up along the same columns, so pages feel coherent even when their content differs. Visitors never see the grid itself, but they notice when it is missing: edges that almost line up, cards of slightly different widths, spacing that changes from section to section.

A grid is a framework, not a cage. Good designs break it occasionally on purpose, for a full-width photo or an offset quote, and the break only reads as intentional because everything else follows the grid.

How it works

A web grid is defined by the number of columns, the width of the gutters between them and the outer margins. Twelve columns is a common choice because twelve divides evenly into halves, thirds, quarters and sixths, giving many layout options. On smaller screens the grid changes, often to four columns on phones, as part of responsive design.

Designers set the grid up in their design tool, and developers build it in CSS, usually with CSS Grid or Flexbox, both standard features of modern browsers. When both sides use the same column count and gutter values, the built site matches the mockup closely.

Web grids are usually fluid: columns are a share of the available width rather than a fixed number of pixels, while gutters often stay fixed. Many sites also set a maximum content width, so on very wide monitors the grid stops growing and lines of text stay readable. A simple self-check is to scroll a few of your pages on a desktop and imagine a vertical line down the left edge of the content. On a gridded site, headings, text and images keep returning to the same few lines.

Example

A catering company's menu page places dish cards of different widths wherever they fit, and it looks messy on every screen. Rebuilt on a 12-column grid, each card spans four columns on desktop, giving three per row, six columns on tablets, giving two, and the full width on phones. Photos, prices and buttons now line up across every card.

One edge case needs a decision: some dishes have no photo. Rather than letting those cards collapse to a different height and break the rows, every card keeps the same image area, with a plain branded panel where a photo is missing, and the description grows downwards. On very wide monitors the content stops at a maximum width, so three cards per row never become five stretched ones.

Why it matters for your business

A consistent grid makes a site look professional and makes new pages faster to design and build, because layouts are assembled from known widths rather than invented each time. It also reduces layout bugs across screen sizes, which saves development time. A small brochure site does not need an elaborate grid system, but it does need someone to decide column widths and spacing once and stick to them.

Common mistakes

• Designing each page on its own measurements, so sections do not align when pages are compared.
• Planning the grid for desktop only and improvising the mobile layout during the build.
• Forcing every element into the grid even when a deliberate full-width break would work better.
• Using different gutter sizes in the design files and in the code, so the build drifts from the design.

Questions people ask

Why do websites use 12-column grids?

Twelve divides evenly by two, three, four and six, so a 12-column grid supports halves, thirds, quarters and sixths without awkward fractions. That flexibility suits the varied layouts of marketing sites. It is a convention rather than a rule, and some designs work well with eight, six or even four columns.

What is a gutter in a grid?

A gutter is the fixed gap between two columns. It keeps content in neighbouring columns from touching and gives the layout a consistent rhythm. Margins are the space between the outer columns and the edge of the screen. Both usually shrink on smaller screens so that content keeps enough width.

Is CSS Grid the same as a design grid system?

Not quite. A design grid system is the layout plan: columns, gutters and margins. CSS Grid is a browser feature that developers use to build layouts in code, and it can implement a design grid very directly. Developers can also build grids with Flexbox or with the grid classes of a framework.