CSS - column-span Property

Previous
Quiz

CSS column-span property determines how many columns an element can span across.

Syntax

 column-span: none | all | initial | inherit;

Property Values

Value Description
none The element spans across a single column.
all The element spans across all columns.
initial This sets the property to its default value.
inherit This inherits the property from the parent element.

Examples of CSS Column Span Property

The following examples explain the columns-span property with different values.

Column Span Property with None value

To let an element span across only a single column, we use the none value. This is shown in the following example.

Example

 <!DOCTYPE html> <html> <head> <style> .multicol-col-rule { column-count: 3; column-gap: 60px; column-rule: 5px dashed red; } h3 { column-span: none; padding: 3px; background-color: lightgreen; } </style> </head> <body> <h2> CSS column-span property </h2> <p> <strong> column-span: None </strong> (The element spans across one column) </p> <div class="multicol-col-rule"> <p> <h3> About TutorialsPoint Company </h3> TutorialsPoint is a widely used online learning platform offering comprehensive resources on diverse subjects, including programming, web development, data science, and more. It provides free, user-friendly tutorials, guides, and courses tailored to learners of all levels. Each topic features clear explanations, interactive examples, and practical exercises to enhance understanding. With a focus on self-paced learning, TutorialsPoint aims to make complex concepts accessible and manageable. Its extensive library and structured content support students, professionals, and hobbyists in expanding their skills and knowledge efficiently and effectively, making it a valuable tool for anyone looking to learn new technologies and techniques. </p> </div> </body> </html>

Column Span Property with All value

To let an element span across all existing columns, we use the all value. This is shown in the following example.

Example

 <!DOCTYPE html> <html> <head> <style> .multicol-col-rule { column-count: 3; column-gap: 60px; column-rule: 5px dashed red; } h3 { column-span: all; padding: 3px; background-color: lightgreen; } </style> </head> <body> <h2> CSS column-span property </h2> <p> <strong> column-span: All </strong> (The element spans across all columns) </p> <div class="multicol-col-rule"> <p> <h3> About TutorialsPoint Company </h3> TutorialsPoint is a widely used online learning platform offering comprehensive resources on diverse subjects, including programming, web development, data science, and more. It provides free, user-friendly tutorials, guides, and courses tailored to learners of all levels. Each topic features clear explanations, interactive examples, and practical exercises to enhance understanding. With a focus on self-paced learning, TutorialsPoint aims to make complex concepts accessible and manageable. Its extensive library and structured content support students, professionals, and hobbyists in expanding their skills and knowledge efficiently and effectively, making it a valuable tool for anyone looking to learn new technologies and techniques. </p> </div> </body> </html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
column-span 50.0 10.0 71.0 9.0 37.0
css_reference.htm
Print Page
Previous
Next
Advertisements