When a website looks chaotic, the colors and photos usually aren’t to blame. The problem is that the elements don’t stand in any order relative to each other. A heading starts a few pixels further in than the text below it, every section has different spacing, and the cards in one row have different widths. Each is a detail on its own. Together they leave the eye with nowhere to rest.
A design grid is a set of invisible lines that everything on the page aligns to. It isn’t a limit on creativity. It’s the reason breaking it, with a large photo across the full width of the screen, makes an impression.
What a grid is made of
- Columns. Usually 12 on desktop, because twelve divides into 2, 3, 4 and 6. Content spans a chosen number of columns, not an arbitrary width in pixels.
- Gutters between the columns, always the same.
- Margins: the distance between the content and the edge of the screen.
- A vertical spacing scale. Instead of arbitrary values, a few fixed ones, usually multiples of 4 or 8 pixels. That gives the sections a rhythm.
The grid on phones and desktops
One grid doesn’t fit every screen. A popular convention is 4 columns on phones, 8 on tablets and 12 on desktops. A card that spans 4 of 12 columns on desktop, a third of the width, spans all 4 on a phone and becomes full width.
What matters is that margins on a phone stay the same across the whole site. If one section touches the edge of the screen and another has 24 pixels of space, the site immediately looks assembled from pieces.
Line length
The grid also decides how long lines of text are. Classic typographic advice puts it at 45–75 characters per line. Longer lines are tiring, because the eye loses its place jumping to the next one. That’s why an article’s text shouldn’t stretch across the full width of a large monitor, even if the images next to it do.
Spacing matters more than it seems
We read elements that sit close together as related. If the space between a heading and its text is the same as between that text and the next heading, the reader can’t tell what the heading belongs to. A simple rule: spacing inside a group should be clearly smaller than spacing between groups.
A fixed spacing scale also helps the team. The designer and developer don’t debate 22 versus 24 pixels; they pick the next step on the scale.
The grid and the design system
The grid is the foundation of a design system. Components such as cards, forms or sections with text and an image are designed to span full columns and use the spacing scale. Then a new page is assembled from ready-made parts that fit together without adjustment. That’s one of the reasons a site built on a system is cheaper to develop.
How to check your site in five minutes
- Left edges. Hold a ruler to the screen or draw a vertical line in any tool. Do the headings, text and buttons start in the same place?
- The number of different spacings. Count how many different distances between sections you see. Three or four is order; ten is chance.
- Line length. Open an article on a large monitor. If a line has more than a hundred characters, the text is too wide.
- Phone. Scroll the site and look only at the side margins. Are they the same everywhere?
- Cards in a row. Do they have the same widths, and does their content start at the same height?
An orderly grid is half of what makes a site feel “professional”. The other half is consistent color and contrast, which we covered in the article on brand colors. See how we bring the two together on our websites service.
Let’s talk about your project
The first call takes 30 minutes and is free. After it, you know whether we can help and what it will cost.
Book a call
