Specify that the column width should be 100px:
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
-moz-column-width: 100px; /* Firefox */
column-width: 100px;
}
More “Try it Yourself” examples below.
Definition and Usage
The column-width property specifies the column width.
The number of columns will be the minimum number of columns needed to show all the content across the element.
column-width is a flexible property. Think of column-width as a minimum width suggestion for the browser. Once the browser cannot fit at least two columns at your specified width then the columns will stop and drop into a single column.
| Default value: | auto |
|---|---|
| Inherited: | no |
| Animatable: | yes. Read about animatable – Try it |
| Version: | CSS3 |
| JavaScript syntax: | object.style.columnWidth=”100px” Try it |
CSS Syntax
column-width: auto|length|initial|inherit;
Property Values
| Value | Description |
|---|---|
| auto | Default value. The column width will be determined by the browser |
| length | A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Divide the text in a <div> element into three columns:
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Specify a 40 pixels gap between the columns:
div {
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
