# Layout grid: what it is and how it works · Zorraquino
> A layout grid is a structure of columns, rows, margins and gutters that helps to organise visual content.
URL: https://www.zorraquino.com/en/dictionary/branding/design-grid.html

# 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.

[The whole glossary](https://www.zorraquino.com/en/dictionary)

## 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

Topics

[Experience and service design](https://www.zorraquino.com/en/dictionary/category/experiencia-y-diseno-de-servicios)

## 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.

## Related concepts

- [Design system](https://www.zorraquino.com/en/dictionary/digital-marketing/design-system.html)
- [Responsive design](https://www.zorraquino.com/en/dictionary/digital-marketing/responsive-design.html)
- [Web design](https://www.zorraquino.com/en/dictionary/digital-marketing/web-design.html)