We rarely notice, item by item, why a design looks "tidy"; there is an invisible skeleton behind it, and grid system design is exactly that skeleton. A grid divides the page into evenly spaced columns and rows so we can align text, imagery and buttons. A well-built grid removes the burden of deciding where every element should sit each time anew; it establishes a rhythm and a logic the eye can follow. In this article I work through the building blocks of the grid, the column and baseline logic, a real CSS implementation, and the common mistakes.
Why grids work
The grid's real contribution is not aesthetics but consistency. Headings, paragraphs and images that snap to the same invisible lines produce an alignment the eye perceives, and that alignment makes content feel "professional" and "trustworthy" on a subconscious level. In practice a grid solves three problems at once:
- It reduces decision load: Each element's width and position is defined relative to columns, so you stop constantly asking "how many pixels?"
- It delivers consistency: Dozens of screens in the same project sit on the same system, producing one coherent look.
- It eases teamwork: When designer and developer speak the same column language, the Figma layout transfers to code almost one to one.
The building blocks of a grid
A few terms come up constantly when discussing a column grid. Clarifying them makes the next steps far easier:
- Column: The vertical area where content sits. On the web, 12 columns is a common choice; 12 divides evenly by 2, 3, 4 and 6, which makes flexible layouts possible.
- Gutter: The gap between two columns. It keeps elements from touching and creates breathing room.
- Margin: The grid's distance from the screen edge. Kept small on mobile and larger on wide screens.
- Module and row: The cells formed where columns intersect horizontal lines; cards and image blocks sit on these modules.
When these four concepts come together, the questions of "how wide, where does it start, how many columns does it span" can all be answered with numbers.
The baseline grid: vertical rhythm
The column grid solves horizontal alignment; the baseline grid solves vertical alignment. A baseline grid divides the page into horizontal lines of equal height and aims to have every line of text sit on those lines. The logic is this: you pick a base unit (for example 8px) and express every vertical measurement — line-height, heading spacing, paragraph gaps — as multiples of that unit. As a result, text lines in two separate columns align at the same height and the page looks "settled."
Chasing a baseline grid pixel by pixel is hard on the web, because font metrics vary by browser. So the practical approach is to build a consistent vertical spacing scale rather than a perfect baseline: keeping every gap a multiple of 4 or 8 gives a rhythm regular enough that the eye won't catch the difference.
Implementing it with CSS Grid
In modern browsers you don't need a separate library to build a 12-column grid; CSS Grid does it directly. The example below defines 12 columns, a fixed gutter and a responsive margin:
.layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px; /* gutter */
max-width: 1200px;
margin-inline: auto; /* center the page */
padding-inline: 24px; /* margin */
}
/* Let a card span 4 columns */
.card {
grid-column: span 4;
}
/* A wide block, 8 columns, starting from the right */
.feature {
grid-column: 5 / 13;
}On mobile, a single media query is enough to collapse 12 columns into one. The key is to reduce the column count according to content, not to squeeze the cards:
@media (max-width: 760px) {
.layout { grid-template-columns: 1fr; gap: 16px; }
.card, .feature { grid-column: 1 / -1; }
}To preserve vertical rhythm, defining a spacing-scale variable simplifies the work. Once you tie every vertical gap to these steps, you have carried the baseline logic into code:
:root {
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 40px;
}
h2 { margin-block: var(--space-4) var(--space-2); }
p { margin-block: 0 var(--space-3); }Breaking the grid on purpose
The grid is a reference, not a prison. The most striking designs are often the ones that establish the grid and then deliberately break it: enlarging an image so it overruns a column edge, or nudging a heading into the margin catches the eye. The rule here is simple: to break it, you first have to build it. Without a system, "breaking" is indistinguishable from randomness. When the grid is solid, a single exception becomes a strong emphasis; without a grid, everything looks like an exception.
Common mistakes
- Too many columns: 24 columns may look like flexibility, but for most projects 12 is more than enough and easier to manage.
- Forgetting gutters: Without gutters, columns stick together; even with correct alignment the design looks cramped.
- Arbitrary spacing: Random values like 13px, 19px, 27px break the rhythm. Lock every gap to multiples of 4 or 8.
- Carrying the grid to mobile unchanged: Cramming the desktop's 12 columns onto a narrow screen creates illegibility; reduce the column count.
Frequently Asked Questions
How many columns should my grid have?
For web interfaces, 12 columns is the most common and most flexible choice because it divides cleanly into 2, 3, 4 and 6 parts. For simple content pages, 6 or 8 columns are enough too; what matters is picking one system and staying faithful to it.
Is a baseline grid really necessary on the web?
A pixel-perfect baseline grid is usually wasted effort on the web. Instead, building a spacing scale that keeps every vertical gap a multiple of 4 or 8 gives the same sense of order with far less struggle.
Should I use CSS Grid or Flexbox?
For two-dimensional page layouts (where rows and columns are managed together), CSS Grid is ideal. For items lined up along a single axis (a navigation bar, a button group), Flexbox is more practical. Using the two together is the most common approach.
Getting the layout right from the start is far faster than dozens of small alignment fixes afterward. For a scalable grid system and interface design tailored to your brand, get in touch with me.