CSS column-span property specifies whether an element in a multi-column layout should span across all the columns or not.
It accepts two values, none and all. none is the default value. Which indicates that the element will span across only one column in the layout.
The column-span: all; specifies that the element will span across all columns in the layout. See the example below:
Example:
.p1{
column-span: none;
}
.p2{
column-span: all;
}
Note: It is to be remembered that the column-span property only works with the block-level elements. An element is called a block-level element if it has display: block;.
CSS Syntax
The column-span property has the following syntax:
column-span: none|all|initial|inherit;
Property Values
The column-span property accepts the following values:
| none | The element spans across only one column in the multi-column layout. This is the default value. |
| all | The element span across all columns in the multi-column layout. |
| initial | Sets the column-span property to its default value(none). |
| inherit | Inherits the column-span property from the parent element. |
General Info
| Default Value | none |
| Inherited | No |
| JavaScript Usage | element.style.columnSpan = “all” |
