# Columns: what it is and how it works · Zorraquino
> Columns are the vertical divisions of a layout grid in which the content of a screen or page is placed.
URL: https://www.zorraquino.com/en/dictionary/ux/columns.html

# Columns

Columns are the vertical divisions of a layout grid in which the content of a screen or page is placed

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

Their number and width change with screen size: it is common to work with 4 columns on mobile, 8 on tablet and 12 on desktop, defined at each breakpoint. In fluid grids, column widths are expressed as percentages so they adapt to the available space; gutters separate them and margins sit at the sides.

Columns help align elements and keep a consistent rhythm, but content can span several of them. In CSS they are implemented with Grid or Flexbox.

Also known as

Grid columns

Topics

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

## Related concepts

- [Layout grid](https://www.zorraquino.com/en/dictionary/branding/design-grid.html)
- [Breakpoint](https://www.zorraquino.com/en/dictionary/internet/breakpoint.html)
- [Margins](https://www.zorraquino.com/en/dictionary/ux/margins.html)