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 thanauto). - <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 PlaygroundBrowser Support
CSS3 Multiple column layout
Method of flowing information in multiple columns
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 50
- 92
- 10
- 37
- 10
Mobile / Tablet
- 10
- 131
- all
- 131
- 132
