CSS column-width property specifies the width of the columns in a multi-column layout.
As the multi-column layout is responsive in nature. Therefore, the column-width property basically specifies the min-width of the columns, not the width.
For example, if we use column-width: 200px;, it means that each column will be at least 200px wide and maybe wider than 200px depending on the available space. But, if the available space is less than 200px, there will be only one column that will be restricted to fit in the available space. See the example below:
Example:
div{
column-width: 200px;
}
CSS Syntax
The column-width property has the following syntax:
column-width: auto|length|initial|inherit;
Property Values
The column-width property accepts the following values:
| auto | This is the default value. The browser itself decides the width of the columns. |
| length | Sets the width of the columns in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. |
| initial | Sets the column-width property to its default value(auto). |
| inherit | Inherits the column-width property from the parent element. |
General Info
| Default Value | auto |
| Inherited | No |
| JavaScript Usage | element.style.columnWidth = “200px” |
