column-span
Definition
The column-span CSS property determines how many columns an element should span across in a multi-column layout.
Examples
Span all columns
.element {
column-span: all;
}
Span two columns
.element {
column-span: 2;
}
Don't span any columns
.element {
column-span: 1;
}
Values
| Value | Description |
|---|---|
<integer> | Specifies the number of columns the element should span. |
| all | Specifies that the element should span all columns in the multi-column layout. |
| initial | Specifies the default value. |
| inherit | Specifies that the value should be inherited from the parent element. |
Best Practices
- Use column-span to create visual interest and break up large blocks of text into smaller chunks.
- Avoid using column-span on elements that are already split across columns.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |