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.
- 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).