CSS Reference Property

column-width

The column-width property allows you to lay an element’s content in multiple columns by specifying a column width value which the browser then uses to create a number of columns to lay the content in.

The exact number of columns depends on the available space, or on a specific number which you can specify using the column-count property.

Setting both column-width and column-count does not always make much sense, and it is more flexible to allow the browser to calculate the number of columns depending on the available space, thus making responsive multi-column layouts easier.

For example, the following sets the widths of the columns to ’12em’. Practically, it means that the columns will be at least ’12em’ wide, as they will be wider depending on the available space. If the available space is less than ’12em’, there will be only one column whose width is restricted to the available space.

body {
    column-width: 12em;
}
                

Laying content, like text and images, in multiple columns is usually done in print magazine layouts, and using this property, along with others, you can create a similar effect on the web.

Trivia & Notes

According to the specification, The reason for making column-width somewhat flexible is to achieve scalable designs that can fit many screen sizes. To set an exact column width, the column gap (see column-gap) and the width of the multi-column element (assuming horizontal text) must also be specified.

Official Syntax

  • Syntax:

    column-width: <length> | auto
  • Initial: auto
  • Applies To: non-replaced block-level elements (except table elements), table cells, and inline-block elements
  • Animatable: yes, as a length

Values

auto
Means that the column width will be determined by other properties (e.g., column-count, if it has value other than auto).
<length>
Describes the optimal column width. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). Specified values must be greater than 0.

Examples

In the following example, there is room for two 45px wide columns inside the 100px wide element. In order to fill the available space the actual column width will be increased to 50px.

div {
  width: 100px;
  column-width: 45px;
  column-gap: 0;
  column-rule: none;
}                
            

In the following example, the available space is smaller than the specified column width and the actual column width will therefore be decreased.

div {
  width: 40px;
  column-width: 45px;
  column-gap: 0;
  column-rule: none;
}
            

Live Demo

In the following demo, the width of the container is set to 90%. The width of the columns is also set, but their number is left for the browser to decide. Resize the demo page to see the number of columns adjust to the screen size. Play with the values of the column width to see how the text adjusts.

View this demo on the Codrops Playground

Browser Support

CSS3 Multiple column layout

Method of flowing information in multiple columns

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 4*
  • 2*
  • 10
  • 11
  • 3.1*

Mobile / Tablet

  • 3.2*
  • 2.1*
  • 11
  • 56
  • 51*

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 10:25 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.