🎯 CSS column-span Property

The column-span CSS property defines whether an element in a multi-column layout spans across one column or all columns.

It is commonly used to make headings, images, or important sections stretch across the full width of a multi-column layout.

The following example makes a heading span across all columns.

h2 {
    column-span: all;
}
                

Default value. The element stays within a single column and does not span across others.

div {
    column-span: none;
}
                

The element spans across all columns, breaking the multi-column flow.

h2 {
    column-span: all;
}
                

Resets the property to its default value (none).

div {
    column-span: initial;
}
                

Inherits the column-span value from its parent element.

div {
    column-span: inherit;
}