Layout grid
A layout grid is a structure of columns, rows, margins and gutters that helps to organise visual content
What it means, how it is used and where it comes up, with its related concepts.
What it is and how it works
It creates relationships and consistency between elements in publications and interfaces. It can adapt to different screen sizes. It should make reading and hierarchy easier; following a grid rigidly does not guarantee a good composition.
Also known as
Typographic grid
Variants and linked concepts
- Columns. Columns organise the composition and can change in number or size depending on the available space.
- Vertical space. Vertical space creates separation and rhythm between elements. It should express hierarchy and help people read the content.
- Fixed grids. A fixed grid keeps specific dimensions in its context. It should anticipate what happens when content or space changes.
- Fluid grids. A fluid grid adapts its dimensions to the available space. Its limits should preserve legibility and composition.
- Margins. Margins separate content from the edges of the medium. Their size should take into account reading, composition and adaptation.
- Padding. Padding is the inner space between content and the edge of a container. It differs from the outer margin.