Section 01

Grid systems

A grid system is an invisible framework that gives a layout structure and consistency. But knowing the rules is only half the story — the other half is knowing when to break them.

Lesson 01 — Beginner · Foundation

What is a grid system?

A grid system is an invisible framework of columns, rows, margins, and gutters that gives a layout structure and consistency. It's the skeleton beneath every well-organized design — present in everything from a newspaper to a mobile app, felt by the reader even when it cannot be seen.

Key insight: Think of a grid as a set of agreements you make with yourself before you start designing. It doesn't restrict creativity — it gives you a shared language for every decision. When two elements align to the same grid, the viewer feels that harmony even if they can't explain why.
Lesson 02 — Beginner · Structure

Columns, gutters, and margins

Columns divide the horizontal space. Gutters are the gaps between columns. Margins define the breathing room at the edges. Together they create a repeatable, scalable layout system that can adapt to any content while maintaining visual coherence.

Key insight: The gutter is one of the most underestimated tools in layout design. Too narrow and content areas merge visually. Too wide and the layout feels disconnected. A common starting point: make your gutter the same width as your margin. Getting the gutter right is often the difference between a layout that feels tight and one that breathes.
Columns, gutters & margins — labeled diagram
Columns, gutters and margins diagram A page layout showing four columns separated by gutters with margins on each side, all labeled with callout lines Margin Edge breathing room Column Content area Gutter Gap between columns 4-column grid — the fundamental building block of print and web layout
Lesson 03 — Intermediate · Layout systems

The modular grid

A modular grid adds horizontal divisions to vertical columns, creating a matrix of cells. It's especially powerful for complex publications, editorial layouts, and data-heavy interfaces where content needs to be organized across both axes simultaneously.

Key insight: The modular grid is what separates a simple layout from a true system. By adding horizontal rows, you create a matrix of repeating units that can be combined and stacked to create variety within consistency. It's the foundation of great magazine design — each spread can look completely different while still feeling like it belongs to the same publication.
Column grid vs modular grid — side by side
Column grid versus modular grid comparison Two page layouts side by side — left shows a simple four-column grid, right shows the same grid with horizontal rows added to create a matrix of modules Column grid Vertical structure only Modular grid Columns + horizontal rows = matrix of modules
Lesson 04 — Intermediate · Typography + layout

The baseline grid

A baseline grid aligns all text to a consistent vertical rhythm. Every line of type sits on a horizontal increment, creating harmony and readability across a layout — especially in multi-column text where the eye moves between columns.

Key insight: Vertical rhythm is something readers feel without consciously noticing. When body text in two adjacent columns aligns line by line, the eye moves effortlessly across the page. A practical rule: set your baseline increment equal to your body text's line height.
Baseline grid — two columns in perfect vertical alignment
Baseline grid showing two text columns aligned to horizontal increments Two columns of text sitting on evenly spaced horizontal baseline rules, demonstrating how a baseline grid creates consistent vertical rhythm across a layout 24px increment Both columns share the same baseline — the eye moves between them without friction
Lesson 05 — Advanced · Design philosophy

Knowing the rules well enough to break them

Breaking the grid isn't chaos — it's contrast. When everything conforms to a grid, a single element that doesn't becomes the most powerful thing on the page. The key is intentionality. Breaking a rule you don't understand is a mistake. Breaking one you know deeply is a decision.

Every great rule-breaker in design history was first a rule-follower. David Carson studied communication design. Wolfgang Weingart trained under the Swiss masters. April Greiman understood classical composition before she abandoned it. The grid-breaking only resonates because the designer understood what the grid was doing.

Key insight: A designer who breaks the grid knowingly creates tension and focus. One who breaks it unknowingly just creates noise. The difference is everything.
Lesson 06 — Advanced · Digital + web

Grid systems in digital design

The 12-column grid became the backbone of modern web design — flexible enough to support one-column mobile layouts and complex multi-panel desktop interfaces using the same underlying structure. Frameworks like Bootstrap popularized this approach, but the principle predates the web by decades.

Key insight: The 12-column grid's power comes from its divisibility — it splits cleanly into halves (6+6), thirds (4+4+4), quarters (3+3+3+3), and sixths. One underlying structure can support radically different layouts without rewriting your system. It comes straight from print grid theory.
Why 12 columns — four layouts, one underlying grid
12-column grid divisibility showing halves thirds quarters and sixths Four rows each showing how a 12-column grid divides into different layout configurations: two halves, three thirds, four quarters, and six sixths Halves 6+6 Thirds 4+4+4 Quarters 3+3+3+3 Sixths 2+2+2+2+2+2 6 columns 6 columns 4 columns 4 columns 4 columns 3 cols 3 cols 3 cols 3 cols 2 2 2 2 2 2 All four layouts live on the same 12-column grid — one system, infinite variety
Section 02

Interactive grid builder

Adjust columns and gutters to see how the structure changes. Then break the grid deliberately — and see what intentional violation looks like.

Interactive — live grid demo
3 8px

A grid broken knowingly creates tension and focus. A grid broken unknowingly creates noise.

Section 03

Test your knowledge

Nine questions spanning beginner through advanced — covering grid fundamentals, layout systems, and the designers who defined and defied the grid.

Section 04

Designer spotlights

Four designers — three who broke the grid brilliantly, and one who proved what mastering it looks like. Click each to go deeper.

Section 05

Glossary

The language of grid systems — from the foundational to the philosophical. Search any term.