Stop 02 · Design Principles & Visual DesignTopics · 4/11

Layout & Grid Systems

In short

Ever seen a screen that just feels 'off' but you can't say why? Usually things don't line up. A grid gives every element a place, so layouts look calm and are easy to build.

Using a consistent grid (columns, gutters, margins) to align and space elements predictably — grids are largely invisible when done well, but their absence makes a layout feel randomly arranged.

The jaadu walks down the aisle of an exam hall with desks in neat columns.

Think of it like this

Exam hall seating

In an exam hall, desks sit in neat columns with aisles between them, and a gap from the walls. Anyone can find seat C4 fast. A layout grid does the same: columns for content, gutters as aisles, margins at the edges.

Watch it happen

Setting up a grid for a web page

Width

Margins

Columns

Gutters

Place

1/5Pick the screen size you're designing for, say a 1440px desktop frame.

The big ideas

What you need to know

12 on desktop, 4 on mobile

Common setups are 12 columns for desktop, 8 for tablet and 4 for phones. Check what your team uses.

8-point spacing

Many teams size spacing in multiples of 8 (8, 16, 24, 32). It keeps gaps consistent and easy to hand off.

Alignment is the point

The grid is invisible to users. What they feel is that edges line up and nothing looks randomly placed.

See it in code

Walk through the code

css

1.page {2  max-width: 1280px;3  margin: 0 auto;4  padding: 0 80px;          /* outer margins */5  display: grid;6  grid-template-columns: repeat(12, 1fr);7  gap: 24px;                /* gutters */8}9 10.sidebar { grid-column: span 3; }11.content { grid-column: span 9; }

1/3Max width, centring and outer margins, the same as your Figma frame setup.

Your Figma layout grid maps almost one-to-one onto CSS Grid, which is why developers love designers who use one.

Save yourself the pain

Common mistakes

Oops

Turning on a grid in Figma but placing things by eye anyway.

Do this instead

Snap elements to column edges. If something breaks the grid, it should be on purpose.

Oops

Using the 12-column desktop grid on a phone screen.

Do this instead

Switch to a 4-column grid with smaller margins on mobile, around 16 to 20px.

Your mission

Rebuild a page on a grid

~40 min

Quick check

Why do so many web layouts use 12 columns?

Go deeper

1Set up a basic 12-column grid in Figma and align a sample layout to it.
2Study a well-designed website's grid structure using a grid-overlay browser extension.
3Learn why consistent gutters and margins matter as much as the column count itself.