In this section, we will learn what column-span property is and how to use it in CSS.

CSS column-span Property Definition and Usage

When we divide the content of an element into multiple columns, there might be a child element here that we want it to span on multiple columns!

This is where we can use the `column-span` property.

Basically, using this property, we can set that a child element should have the width of x number of columns where x defines how many columns the target child element should span on.

Note: this property is applied to the child of an element that is divided into multiple columns.

CSS column-span Property Syntax

column-span = value;

CSS column-span Property Value

The value of this property is a number that specifies the number of columns we want the target child element to span on.

Notes:

• We could also use the value “all” which means the target element should span across the entire available columns.
• The two global values, “initial” and “inherit” could also be used for this property.

Example: column-span property in CSS

See the Pen column-span property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS column-span Property Work?

Here, the <div> element is divided into 3 columns. We then used the `column-span` property on the <h1> element which is the child of the <div> element and set its value to “all” which means it should span across the entire available columns (3 in this case).