CSS columns property sets the minimum width and the maximum number of columns in a multi-column layout. It is a shorthand of below two properties:
The column-width property sets the minimum width of each column and the column-count property sets the maximum possible number of columns in the layout.
As the multi-column layout is responsive in nature. Therefore, if enough space is not available, the number of columns starts decreasing and column width starts increasing.
If the available space is less than the specified column width, there will be only one column that will be restricted to fit in the available space.
In the example below, each column will be at least 100px wide and there will be maximum 3 columns in the layout. Try it out to see how it works:
Example:
div{
columns: 100px 3;
}
Note: If any of the two values is omitted, its default(initial) value will be used.
CSS Syntax
The columns property has the following syntax:
columns: auto|column-width column-count|initial|inherit;
Property Values
The columns property accepts the following values:
| auto | This is the default value. It Sets both properties to their initial value(auto). |
| column-width | Specifies the minimum width of each column. |
| column-count | Specifies the maximum number of columns that a layout can have. |
| initial | Sets the columns property to its default value(auto). |
| inherit | Inherits the columns property from the parent element. |
General Info
| Default Value | auto auto |
| Inherited | No |
| JavaScript Usage | element.style.columns = “100px 3” |
