In this article · 8 sections
Have you noticed how well-designed websites feel orderly even when they contain lots of different content? That's usually because of a grid: invisible columns that everything lines up with. Understanding the basics helps you design better pages and communicate more clearly with your designer or developer.
What a grid is
A grid divides the page width into columns with gaps (called gutters) between them, plus margins at the edges. Content blocks span one or more columns. Because every block snaps to the same columns, edges line up and the page feels organised.
Why 12 columns?
Twelve divides neatly in many ways: - 1 block × 12 columns (full width) - 2 blocks × 6 columns (halves) - 3 blocks × 4 columns (thirds) - 4 blocks × 3 columns (quarters) - 8 + 4 (main content + sidebar)
That flexibility is why popular frameworks like Bootstrap use a 12-column grid.
Key terms
- Container: the maximum width of your content (e.g. 1140–1280 px on desktop), centred on large screens
- Columns: the vertical divisions inside the container
- Gutter: the space between columns (e.g. 24 px)
- Margin: space between the container and the screen edge
- Breakpoints: screen widths where the layout changes (phone, tablet, desktop)
How layouts change at breakpoints
| Section | Desktop | Tablet | Phone |
|---|---|---|---|
| Services cards | 3 per row (4 cols each) | 2 per row (6 cols) | 1 per row (12 cols) |
| Text + image | 6 + 6 | 6 + 6 or stacked | Stacked |
| Blog + sidebar | 8 + 4 | 12, sidebar below | 12, sidebar below |
| Footer | 4 columns of 3 | 2 columns of 6 | Stacked |
This is the heart of responsive design: the same content, rearranged across fewer columns as the screen narrows.
Common section layouts
Hero
Headline and buttons across 6–7 columns, image or form across 5–6. On mobile, stack text first, then image/form.
Feature grid
Three or four cards in equal columns, all the same height, with consistent internal padding.
Alternating rows
Image left, text right; then text left, image right. Good for explaining a process or services. On mobile, keep the image above the text consistently.
Long-form reading
For blog posts, limit the text column to about 7–8 of 12 columns (roughly 680–760 px) so lines aren't too long.
CSS Grid and Flexbox
Modern websites build grids with CSS: - Flexbox works well for one-dimensional rows (navigation bars, button groups, card rows that wrap) - CSS Grid works well for two-dimensional layouts (galleries, dashboards, complex sections)
Frameworks like Bootstrap provide ready-made grid classes; custom designs often use CSS Grid directly.
Tips for a tidy layout
- Align text and images to column edges. Avoid "almost aligned"
- Use the same container width across all pages
- Keep gutters consistent
- Don't stretch text across the full width of large screens
- Check every layout at 360 px width (a common phone size) for overflow
- Combine the grid with a spacing scale for vertical rhythm
Breaking the grid on purpose
Designers sometimes let an image bleed to the screen edge or overlap two sections for visual interest. That works because the rest of the page follows the grid. Break it once or twice for emphasis, not everywhere.
Every website we build uses a consistent grid tested on phones, tablets and desktops. See what we can build for you.