What is a grid system in UX?

The parts of a grid

Three pieces do most of the work. Columns are the vertical bands that content sits in. Gutters are the gaps between columns, which keep text and images from touching. Margins are the space between the grid and the edge of the screen.

You can add rows and a baseline grid for vertical rhythm, which keeps lines of text aligned across columns. Together they give you a set of rules that answer the daily question of where something goes and how wide it should be.

Why designers bother with grids

Grids save decisions. Instead of nudging a card three pixels to the left because it looks right, you snap it to a column and move on. The result is a layout that feels calm and organized, and a team that can build pages in the same way without long explanations.

They also help developers. A 12-column layout, for example, divides neatly into halves, thirds, quarters and sixths, which makes flexible layouts easy to describe in code and easy to rearrange when the screen changes size.

Setting one up, step by step

Start with the content, not the number of columns. Then:

• Choose the screen widths you will design for, such as mobile, tablet and desktop.
• Pick a column count for each. Four columns on a phone and twelve on a desktop is a common pattern.
• Set gutters and margins from a spacing scale, such as multiples of 8, so they fit the rest of your spacing.
• Decide how elements span columns: a card might take all four on a phone and three of twelve on a desktop.
• Save it as a layout style or component in your design tool so the team uses the same one.

As a rule of thumb, avoid fixed pixel widths and think in proportions, since the grid has to stretch.

Fixed, fluid and the mistakes to avoid

A fixed grid keeps columns at set widths and centers the page. A fluid grid scales columns with the screen. Most modern work blends the two, with a maximum width so lines of text do not become unreadable on large monitors.

Common mistakes include using a grid so rigidly that every page looks identical, forgetting that text needs a comfortable line length, and designing at one width and hoping the rest will sort itself out. Another is ignoring the grid in the one place that matters, such as a hero image that wanders off the alignment.

Breaking the grid on purpose

Editorial and brand sites often break the grid deliberately: an image bleeding off the page, a headline that overlaps a photo. It works because the grid is still there, and the break stands out against it. Learn the rules first, then break them with a reason.