CSS column-count property divides the content of an element into the given number of columns. It takes an integer value as the number of columns.
In the example below, the content of the <div> element is divided into 3 columns. Try it out to see how it works:
Example:
div{
column-count: 3;
}
CSS Syntax
The column-count property has the following syntax:
column-count: integer|auto|initial|inherit;
Property Values
The column-count property accepts the following values:
| integer | Specifies the number of columns an element is divided into. |
| auto | This is the default value. |
| initial | Sets the column-count property to its default value(auto). |
| inherit | Inherits the column-count property from the parent element. |
General Info
| Default Value | auto |
| Inherited | No |
| JavaScript Usage | element.style.columnCount = “3” |
