Columns - Property CSS

Syntax diagram of columns.

Syntax diagram of the columns property.
Download the diagram in SVG.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• length is a numeric, positive value, followed by one of CSS dimension units.
• integer is an integer without a unit. It must be equal to or greater than 1.

Description of the columns property.

The CSS property columns allows you to implement, very simply, a column layout: it defines the minimum width and the maximum number of columns. This property is therefore a shortcut for the following two CSS properties:

• column-width: minimum column width.
• column-count: maximum number of columns.

The property columns distributes the content of the element across the specified number of columns. The distribution is done by default to best balance the height of the columns. However, if this leads to columns narrower than the specified width, the browser automatically reduces the number of columns. It is therefore very easy to create layouts that adapt to the screen size (responsive) without using media-queries.

Values for columns.

• columns: auto;

  Default value. The browser displays the content in a single column.

• columns: 200px;

  The columns will have a minimum width corresponding to the indicated value. However, if the available space allows, the browser may display wider columns.

  The value must be a positive number and be followed by a unit of measurement (see CSS dimension units). Percentages are not allowed.

• columns: 3;

  Without additional constraints, the browser will display the element across the specified number of columns.
  The value must be a positive number without a unit.

• columns: 200px 3;

  When two values are indicated, the first must be a dimension and corresponds to the minimum width of the columns. Depending on the available space and the number of columns requested, the columns may be wider.

  The second value is an integer without a unit that indicates the maximum number of columns, but, depending on the available space and the requested width, the browser may display fewer.

• columns: initial; (auto) columns: inherit; columns: revert; columns: revertLayer; columns: unset;

  These values ​​are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

General information on column layout.

Columning, or page layout in columns, consists of distributing the content of an element across multiple columns. The distribution of this content among the columns is automatic and generally aims to balance the height of the columns.

The image below shows what a block of text arranged in columns will look like. It is indeed a single element and not three elements that have been placed side by side, as would be the case with floating elements, a flex-box, or a grid.

This example clearly shows the components of a columnar presentation:

• The width of the columns, defined by the property column-width. All columns have the same width.
• The space between the columns, called gap in English, is adjusted by the property column-gap .
• A possible separation line between columns, called rule in English. It is defined by the shorthand property column-rule or the corresponding individual properties: column-rule-color , column-rule-style , etc.

Column breaks.

By default, the browser tries to distribute the text as evenly as possible between the columns. These should therefore all be roughly the same length. It is however possible to manage the column balancing with the column-fill property.

It is also possible to manually position column breaks using the break-before or break-after properties.

Overlaps.

One must also know the property column-span which allows an internal element to extend across all columns (for example a title or an image).

Title spanning all columns.

Coactique aliquotiens nostri pedites ad eos perse quendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices vene rint summos, inter arta tamen et invia nullas acies explicare permissi nec fir­mare nisu valido gressus: hoste discur­satore rupium abscisa volvente, ruinis ponderum inmanium conster nuntur, aut ex neces­sitate ultima fortiter dimicante, superati peri­cu­lose per prona discedunt.

Writing direction.

The arrangement and orientation of the columns are, of course, influenced by the direction of writing (CJK languages, Arabic...).

writing-mode : horizontal-tb vertical-rl vertical-lr

Overflows.

When an element has a defined width larger than the column width, it overflows into the neighboring column(s). To prevent this, you can set the maximum width of this element to 100%.

Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum. Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus: hoste discursatore rupium abscisa volvente, ruinis ponderum in manium conster nuntur, aut ex necessitate ultima fortiter dimicante, superati peri­cu­lose per prona discedunt. Haec subinde Constantius audiens et quaedam referente Thalassio doctus, quem eum odisse iam conpererat lege communi, scribens ad Caesarem blandius adiumenta paulatim illi subtraxit, sollicitari se simulans ne, uti est militare otium fere tumultuosum, in eius perniciem conspi raret, solisque scholis iussit esse contentum palatinis et protec torum cum.

Animation of the columns property.

Refer to the individual properties for animation examples. But it is rare to animate properties related to column layout.

Simulator.

Choose the two settings for columns (minimum column width and maximum number of columns). You can then adjust the width of your browser window to see how the width and number of columns change.

Browsers compatibility with columns.

Multi-column layout is relatively well supported by current browsers, although some features still cause problems (which explains why the first column of the table below is not entirely green). But the columns property is well recognized.

Notes:

(1) Does not support the values avoid (in the column context), avoid-column, and avoid-page for the properties break-after, break-before, and break-inside.

(2) Does not support the properties break-after, break-before, and break-inside.

1

Multiple column
layout

2

columns
property

Estimated overall support.

18%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

Baidu Browser

2

QQ Browser

2

Opéra Mobile

2

Firefox

2

Chrome

2

Safari

Edge

2

Opéra

2

Chrome pour Androïd

2

Safari sur IOS

Samsung Internet

2

UC Browser pour Androïd

2

Androïd Brower

2

Firefox pour Androïd

2

KaiOS Browser

2

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the columns property.

The specification regarding multi-column layouts has not evolved much since its creation.

• CSS Multi-column Layout Module Level 1

  This specification describes multi-column layout. It is enough to set the number of columns on the container, and the content will be arranged across the specified number of columns. Of course, other properties allow finer control over multi-column containers.
  This specification also defines properties concerning the space between columns and any possible dividing line.

  Regarding columns. Introduction of multi-column layouts, and the columns property.
  

  June 23, 1999

  Working Draft.

  

  December 17, 2009

  Candidate Recommendation.

  

  

• CSS Multi-column Layout Module Level 2

  Few new features on level 2 of this specification. Simply note a pseudo-element ::column which allows targeting the columns themselves (all columns at once). It accepts few properties.

  Regarding columns. No changes regarding the columns property.
  

  December 19, 2024

  Working Draft.

  

  

  

Other properties in the same standardization module as columns.

The specification CSS Multi-column Layout Module describes everything related to multi-column layouts. The property columns is therefore referenced in this module, as well as the terms below:

Properties:

column-count

Sets the number of columns, in a multi-column layout.

column-fill

Manages the distribution of content across columns.

⚠

column-height

Sets the height of the columns in the case of a multi-column layout. This height can be less than the height of the container, resulting in a kind of table.

column-rule

Shorthand property that defines all parameters of the separator trait between columns.

column-rule-color

Defines the color of the column-separating rules in the context of a multi-column layout, a grid container, or a flex container.

column-rule-style

Choose the type of line for separating columns, in the context of a multi-column layout, a flex container, or a grid container.

column-rule-width

Defines the thickness of the separating line between columns, in the context of a multi-column layout, a flex container, or a grid container.

column-span

Manages overlapping content across multiple columns.

column-width

Sets the width of the columns.

Columns

Defines the characteristics of a multi-column layout.