Basic Grid

Intersecting lines that divide pages into small squares, which allows you to easily lay out elements in a design

Why it matters

A grid is a set of decisions made once so a hundred later ones become automatic: where things align, how wide they run, what lines up with what. Without one, every element placement is a fresh negotiation — and it shows.

See it

Twelve columns underneath; the blocks above simply agree with them — 8+4, then 4+4+4.

The numbers

12 columns — the web’s most common layout grid
8px — the most common spacing unit riding on it

Related terms

Elements
Borders
Layout Grid
Baseline Grid
Chip

Go deeper in Learn UX

Design systems basics Prototyping & Visual Design

Ask your assistant

Define "Basic Grid" using uxspot.

Works in Claude, Cursor or any MCP client — connect the uxspot MCP.

Think it stuck? A 20-second round of Spot Check will tell you.