CSS columns Property
Example
Specify the minimum width for each column, and the maximum number of columns:
columns: 100px 3;
}
Definition and Usage
The columns
property is a shorthand property for:
- column-width
- column-count
The column-width part will define the minimum width for each column, while the column-count part will define the maximum number of columns. By using this property, the multi-column layout will automatically break down into a single column at narrow browser widths, without the need of media queries or other rules.
Default value: | auto auto |
---|---|
Inherited: | no |
Animatable: | yes, see individual properties. |
Version: | CSS3 |
JavaScript syntax: | object.style.columns="100px 3" |
- Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
- object - object in javascript means the element on which
columns
is applied. - Animatable - "Animatable = yes" means that it can be animated with CSS
@keyframes
.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.
Property | |||||
---|---|---|---|---|---|
columns | 50.0 4.0 -webkit- |
10.0 | 52.0 9.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
CSS Syntax
Property Values
Value | Description | Demo |
---|---|---|
auto | Default value. Sets both the column-width and column-count to "auto" | |
column-width | Defines the minimum width for each column | |
column-count | Defines the maximum number of columns | |
initial | Sets this property to its default value. | |
inherit | Inherits this property from its parent element. |
More Examples
Example
Divide the text in a <div> element into three columns:
column-count: 3;
}
Example
Specify a 40 pixels gap between the columns:
column-gap: 40px;
}
Example
Specify the width, style, and color of the rule between columns:
column-rule: 4px double #00ffff;
}
Comments
Post a Comment