CSS - column-span Property

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
column-span	50.0	10.0	71.0	9.0	37.0

css_reference.htm

Print Page