Skip to content

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.

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

Related concepts

Columns: what it is and how it works · Zorraquino