CSS column-span Property

CSS column-span property specifies how the HTML Element should span across the columns.

The column-span property can have one of the four values mentioned in the following code snippet.

</>
Copy
column-span: none;
column-span: all;
column-span: initial;
column-span: inherit;

The following table gives the description for the column-span values.

column-span: value;Description
column-span: none;The element should span across one column.
[Default Value]
column-span: all;The element should span across all columns.
column-span: initial;Sets column-span to default value.
column-span: inherit;Inherits column-span value from its parent element.

Examples

In the following examples, we set the span of the element across columns with different possible values, using column-span property.

column-span: all;

In the following example, we set the h2 element to span across all the columns.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            column-count: 3;
            column-rule: solid #6993ff;
        }
        h2 {
            column-span: all;
        }
    </style>
</head>
<body>
    <div>
        <h2>Heading inside a Div that has column count</h2>
        This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.
    </div>
</body>
</html>

column-span: none;

In the following example, we set the span of h2 element across columns to none.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            column-count: 3;
            column-rule: solid #6993ff;
        }
        h2 {
            column-span: none;
        }
    </style>
</head>
<body>
    <div>
        <h2>Heading inside a Div that has column count</h2>
        This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.
    </div>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about column-span property, and how to use this property for HTML Elements, with examples.