Structure, not a cage
A grid is a set of spatial relationships. It helps unrelated elements feel as though they belong to the same world. The purpose is not to make every page identical, but to make variation intelligible.
The grid system is an aid, not a guarantee.
Figure 01
Structure and occupation
A grid creates shared edges, then leaves the designer free to vary scale and occupation.
Source
Proteus study
Columns and modules
Columns create horizontal options; baseline intervals create vertical rhythm. Together they form modules that can hold text, image, caption, and space. More columns offer flexibility, but also demand stronger judgment.
Choose a column count based on content. A reading page may need a wide text column and a narrow margin column. A catalogue may benefit from a denser modular grid.
Margins and gutters
Margins establish the field. Gutters keep adjacent material distinct. Their proportions influence the page’s voice: generous margins feel contemplative; narrow margins can feel urgent or economical.
Breaking the grid
A break is meaningful only when the underlying order is visible. Let most elements establish the rule before one element crosses columns, enters a margin, or shifts off the baseline.
Observe — Figma
A flexible canvas still needs shared edges.
Frame 01
Group
Text
Position
Layout
Fill
Exercise 01
Where is the grid break?
Reveal the observation +
The dark block spans two columns and enters the outer margin. It feels deliberate because every smaller element first establishes the column logic.
- The grid responds to the content type.
- Margins have intentional proportions.
- Gutters remain clear at small sizes.
- Vertical rhythm is considered alongside columns.
- Exceptions strengthen rather than obscure the structure.
Chapter summary
Keep these
ideas close.
- 01A grid creates shared spatial relationships.
- 02Margins and gutters shape the voice of the field.
- 03Break a grid only after its order has become visible.
Related topics
Responsive grids
On smaller screens, preserve relationships rather than column counts. A twelve-column desktop grid does not need twelve mobile columns; it needs the same logic of alignment, grouping, and rhythm translated to a narrower field.
Keep exploring
References
Books
Grid Systems in Graphic Design
Josef Müller-Brockmann · The canonical practical study of modular order.
Making and Breaking the Grid
Timothy Samara · A broad view of structure and expressive exceptions.
Web & practice
Layout Land
Clear demonstrations of modern responsive layout systems.
The Book Cover Archive
A rich field for observing grids in compact compositions.
Field exercise
Trace the hidden columns of a newspaper front page using transparent paper.