Grid systems — Design, 11–13
A grid is an invisible set of lines that helps a designer line up parts of a page or screen.
An invisible structure
A grid divides a page or screen into useful columns, rows or margins. Text, pictures and buttons can line up with these guides, even when the guides are not printed. The grid does not make every design look identical; it gives different parts a shared structure so the whole feels easier to follow.
Why use a grid?
Without a shared structure, each item can land at a slightly different height or edge. The result may feel messy, and readers spend effort working out how the parts relate. Grids were developed to organise information consistently, especially across several pages or screens made by different people.
Worked example: a recipe card
Make a recipe card that is 20 centimetres wide. Set a 2-centimetre margin on each side, leaving 16 centimetres inside. Split that space into two 7-centimetre columns with a 2-centimetre gap: ingredients on the left and steps on the right. Their aligned headings make the card quick to scan.
The rigid-grid trap
A common mistake is forcing every object into every grid line. This feels safe because alignment creates order, and a rule seems easier to follow when it has no exceptions. But a grid is a guide, not a prison. A title may need extra space, and a picture may cross a line to make the message clearer.
Grids in everyday design
Newspapers, comic pages, websites, maps and shop displays often use grids. A website can keep its logo, menu and text aligned as the screen changes size. A map uses repeated rows and columns to help you locate places. The grid is usually hidden, but you notice its absence when everything seems to drift.
Keep exploring
Other languages
Loading MyLeoNes™…