CSS column-span Property

Last Updated : 5 Jun, 2026

The column-span property in CSS is used to specify whether an element should span across all columns in a multi-column layout or remain within a single column.

  • Allows elements such as headings to extend across multiple columns.
  • Helps create visually distinct sections within multi-column content.
  • Commonly used with multi-column layouts to improve content organization.

Syntax: 

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

Property Values:

  • none: Default value. The element remains within a single column.
  • all: Allows the element to span across all columns.
  • initial: Sets the property to its default value.
  • inherit: Inherits the property value from the parent element.

Examples of CSS column-span Property

The column-span property controls whether an element spans across all columns or remains within a single column in a multi-column layout.

Example: The heading spans across all three columns using the column-span: all property.

html 
<!--Driver Code Starts-->

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | column-span Property
    </title>
<!--Driver Code Ends-->

    <style>
        .paragraph {
            column-count: 3;
        }
        
        h2 {
            column-span: all;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <div class="paragraph ">
        <h2> Here we used col-span:all; 
          It had done span across three columns
        </h2>
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
  </div>
</body>
</html>

<!--Driver Code Ends-->

Example: The heading remains within a single column using the column-span: none property.

html 
<!--Driver Code Starts-->

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | column-span Property
    </title>
<!--Driver Code Ends-->

    <style>
        .paragraph {
            column-count: 3;
        }
        
        h2 {
            column-span: none;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <div class="paragraph ">
        <h2> Here we used col-span:none;
          It had done span across three columns
        </h2>
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
  </div>
</body>
</html>

<!--Driver Code Ends-->

Example: The heading uses the default column-span behavior through the initial value, remaining within a single column.

html 
<!--Driver Code Starts-->

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | column-span Property
    </title>
<!--Driver Code Ends-->

    <style>
        .paragraph {
            column-count: 3;
        }
        
        h2 {
            column-span: initial;
        }
    </style>

<!--Driver Code Starts-->
</head>

    <div class="paragraph ">
        <h2> Here we used col-span:initial;
          It had done span across three columns
        </h2>
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
  </div>
</body>
</html>

<!--Driver Code Ends-->

Example: The inherited column-span value allows the heading to span across all columns.

html 
<!--Driver Code Starts-->

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | column-span Property
    </title>
<!--Driver Code Ends-->

    <style>
        .paragraph {
            column-count: 3;
        }
        
        h2 {
            column-span: all;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <div class="paragraph ">
        <h1>Here colspan: all;
          Inheritance is done in next paragraph 
        </h1> 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
    </div>
    <br>
    <br>

    <div class="paragraph ">
        <h2>Here  we used colspan: inherit.;</h2> 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
      GeeksforGeeks GeeksforGeeks GeeksforGeeks
    </div>

</body>

</html>


<!--Driver Code Ends-->
Comment
Article Tags:
Web Technologies
CSS
CSS-Properties

Explore