In a design system's column grid, what are columns, gutters and margins, and what job does each one do?
answer
- tracks, channels and edges
- content spans columns
- gutters keep neighbours apart
- margins keep content off the edge
- a span includes its inner gutters
basics
~20 sColumns are the vertical tracks that content spans; gutters are the fixed spaces between columns that keep neighbouring content apart; margins are the space between the outer columns and the window edge. Together they give every screen shared alignment lines.
solid answer
~40 sA **column grid** divides the width available into **columns**, the tracks content spans; **gutters**, the fixed spaces between columns; and **margins**, the space between the outermost columns and the edge of the window. In a recruiters' applicant-tracking tool, the filter panel might span 4 of 12 columns and the candidate list 8. Content aligns to column edges, so components on different rows line up; gutters keep neighbouring components consistently apart; margins keep content off the window edge. A component spanning *n* columns also covers the *n - 1* gutters inside the span, so its width is `n x column + (n - 1) x gutter`. Content does not start or end inside a gutter. The grid gives designers and engineers one shared set of alignment lines instead of every screen inventing its own.
go deeper
Recall the three parts: columns to span, gutters between them, margins at the edges, and that spans include their inner gutters.
Explain the span arithmetic and why gutters and margins come from the spacing scale rather than being chosen per screen.
Show how you keep nested content aligned with the outer grid, and when a consistent offset is the better compromise.
Discuss how one grid definition is shared across web, native and design files so that every platform lands on the same alignment lines.
## Why a column grid Without a shared structure, every screen places its panels by eye, and nothing lines up across screens or even across rows of the same screen. A **column grid** is a set of invisible vertical guides that every layout snaps to. It makes pages feel ordered, makes it easy to predict where things go, and gives design and code the same vocabulary: "the filter panel spans 4 columns". ## The three parts | Part | What it is | Its job | |---|---|---| | **Column** | a vertical track of equal width | the unit content spans; its edges are the alignment lines | | **Gutter** | the fixed space between two columns | keeps neighbouring components apart by a consistent amount | | **Margin** | the space between the outer columns and the window edge | keeps content off the edge; on wide windows it can grow | Gutter and margin values are chosen from the system's spacing scale, so the grid and the spacing agree. ## Choosing the numbers Three decisions define a grid for each window range: how many columns, how wide the gutters, how wide the margins. Narrow windows usually get fewer columns and smaller gutters and margins, because every unit of width is precious; wide windows get more columns and larger margins. The gutter is usually the same size as a common spacing step used between components elsewhere, so the space between two cards in a row looks the same as the space between two cards in a column. Margins are often equal to or larger than the gutter, so content never looks closer to the window edge than to its neighbour. ## How spanning works A component does not sit in one column; it **spans** a whole number of them, and the gutters between those columns belong to it. 1. Choose how many columns the component spans, *n*. 2. Its width is *n* columns plus the *n - 1* gutters inside the span. 3. Its left edge sits on a column's left edge; its right edge on a column's right edge. 4. The gutter after it separates it from the next component. A worked example on a window 1440 units wide, with 48-unit margins, 12 columns and 24-unit gutters: - Content width: 1440 - 2 x 48 = 1344. - Eleven gutters: 11 x 24 = 264. - Each column: (1344 - 264) / 12 = 90. - A filter panel spanning 4 columns: 4 x 90 + 3 x 24 = 432. - A candidate list spanning 8 columns: 8 x 90 + 7 x 24 = 888. - Check: 432 + one gutter of 24 + 888 = 1344. ## Rules that keep a grid useful - **Edges on column lines.** Content starts and ends on column edges, not inside gutters. Full-bleed elements, such as a page-wide banner, deliberately ignore the grid and cross the margins too. - **Gutters are space, not content.** Placing text in a gutter defeats its purpose of separating neighbours. - **Nested content aligns.** Text inside a card should ideally line up with the column lines outside it; when it cannot, the offset should be the same everywhere. - **The grid is a guide, not a cage.** Small elements, such as an icon inside a button, follow the spacing scale rather than the column grid. ## The same idea on every platform The column grid is a design concept, not a platform feature. Web layouts, native mobile screens and design editors all express it: design files overlay the grid for placement, and code implements spans with whatever layout mechanism the platform offers. What matters for the system is that the numbers, meaning the column count, the gutter and the margin for each window size, are documented once and used identically in design and code. ## Common mistakes - Treating the grid as columns only and forgetting that gutters are part of every multi-column span. - Giving each screen its own gutter, so components shift slightly between screens. - Hard-coding a component's width in units, so it no longer matches its span when the window changes. - Aligning the container to the grid but not its content, so text inside cards floats off the lines. In a recruiter's pipeline, the payoff is concrete: the job summary header, the stage columns and the candidate cards all start on the same line, so the eye scans the page without friction.
- How wide is a component that spans 4 columns?Four column widths plus the three gutters inside the span. On a grid with 90-unit columns and 24-unit gutters that is 4 x 90 + 3 x 24 = 432. Forgetting the inner gutters is the most common arithmetic slip, and it leaves components too narrow to line up with a neighbour spanning the same columns on another row.
- Should content inside a card also align with the page's column lines?Ideally yes, so text in a card lines up with text outside it. When the card's own inset makes that impossible, keep the offset identical on every card so the misalignment is consistent. Some systems solve it with a nested grid that inherits the page's gutter, which keeps inner content on the outer lines.
- What are margins for on a very wide window?They keep content off the edge and, on wide windows, often grow so that the content area stops widening at a maximum width. That keeps lines of text and forms at a comfortable size instead of stretching across the whole window.
A column grid is like the lanes painted on a road: cars can take one lane or straddle several when they are wide, but the lane lines tell everyone where to line up, and the space between lanes keeps neighbours from touching.
saying these in an interview costs you the question
- A component spanning 4 columns is exactly 4 column widths wide.
- Gutters are spare space where small labels or icons can go.
- Each screen should choose its own gutter to suit its content.
- A column grid is a web-only concept that native apps do not use.
- Every element, down to icons inside buttons, must snap to the column grid.