Layout & Grid Systems

What it is

A grid system is a set of columns, gutters and margins that content is placed against, plus the breakpoints at which that arrangement changes. It is what makes screens predictable: a reader learns where content starts and how wide it runs, and the same arrangement then holds on every page.

Why it matters

Without a grid, every screen is positioned by feel and drifts a few pixels at a time until the product looks hand-made in the bad sense. With one, a designer placing a block has a small number of positions to choose from, and an engineer knows what to build without measuring. The grid also decides the measure of body text and the size of images, so it touches typography, spacing and the responsive behaviour at the same time.

In this track

1. Columns and gutters (03-design-ux/30-layout-grid-systems/01-columns-and-gutters) — choosing the column count and the spacing between and around them.
2. Breakpoints (03-design-ux/30-layout-grid-systems/02-breakpoints) — deciding where the arrangement changes and what it changes to.

Prerequisites

• Visual Design (03-design-ux/10-visual-design)

Go deeper

• Visual Design (03-design-ux/10-visual-design) — read this first; the grid is what makes alignment systematic.
• Cascading Style Sheets (CSS) (02-frontend/05-css) — the implementation: the layout modes that put content on the grid in the browser.
• Responsive Web Design (02-frontend/10-responsive-web-design) — the wider practice of adapting a layout across devices.
• Typography (03-design-ux/28-typography) — the measure the columns are chosen to support.