CSS column-width

The column-width property is used to specify the minimum column width in a multi-column layout. It is a longhand property for columns.

CSS

column-width: value;

This property can be used when you want a multi-column layout, similar to that used in print magazines.

It specifies the minimum column width, which means that the width of columns may be greater than the one specified depending on the availability of space in a multi-column layout. However, column width may be smaller than the value specified if the width of its container is smaller than the specified value. The following declaration means that the column width will be atleast 20px.

CSS

column-width: 20px;

This property is generally used with another property column-count, which is used to specify the number of columns in which the content of an element is displayed in a multi-column layout. The following points explain different cases.

• When no column-count value is specified, then the number of columns in which the content is displayed depends on the column-width value according to the total space available.
• When column-count value is specified and column-width value is not specified, then the total number of columns is decided by the column-count value and the column width depends on the total space available.
• When both column-count and column-width values are specified, then the number of columns specified by the column-count property determines the maximum number of columns.

These points will be understood better with examples.

Values

auto : Specifies that the number of columns will be decided by other properties like column-count. This is the default value.

<length> : Specifies optimal column width in px, em, rem, pt, etc. The actual column width may be greater than this specified value depending on the availability of space, or may be smaller than this value if the available space (screen width or container width) is smaller than it.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Examples

In the first demo, the column width is specified as 100px using the column-width property. Since no column-count value is set, the browser determines the number of columns into which the paragraph content is to be displayed according to the available space. Use the prefix -webkit- for browser support from Chrome, Safari and Opera, and -moz- for support from Firefox.

CSS

p {
  -webkit-column-width: 100px; /* Chrome, Safari, Opera */
  -moz-column-width: 100px; /* Firefox */
  column-width: 100px;
}

See the Pen column-width example by Aakhya Singh (@aakhya) on CodePen.

Try resizing the window to see the difference in the number of columns due to change in available width.

In the second demo, the number of columns into which the paragraph content is divided is set to 3 using the column-count property. Since no column-width value is set, the browser determines the column width according to the available space. Try resizing the window to see the difference in the column width, while the number of columns being constant.

CSS

p {
   -webkit-column-count: 3; /* Chrome, Safari, Opera */
   -moz-column-count: 3; /* Firefox */
   column-count: 3;
}

See the Pen column-count example by Aakhya Singh (@aakhya) on CodePen.

In the following demo, column-count is set to 6 and column-width is set to 100px. So, the browser tries to make the column width equal to 100px such that the maximum number of columns is 6. If the number of columns exceeds 6 on making column width 100px, then the browser tries to adjust the column width such that the number of columns is 6.

CSS

p {
  -webkit-column-count: 6; /* Chrome, Safari, Opera */
  -moz-column-count: 6; /* Firefox */
  column-count: 6;
  -webkit-column-width: 100px; /* Chrome, Safari, Opera */
  -moz-column-width: 100px; /* Firefox */
  column-width: 100px;
}

See the Pen column-count and column-width example by Aakhya Singh (@aakhya) on CodePen.

Try observing the results obtained by changing the values for better understanding.

Browser Support

This property is not supported in IE 9 and earlier versions. For maximum browser compatibility, use the prefixes -webkit- and -moz-.