column-span

Description
Syntax
Examples
Links

Description

The column-span property for CSS describes how many columns an element spans across.

Syntax

CSS

column-span: value;

JS

object.style.columnSpan = "value";

Values

<'column-span'> = none | all

none

The element does not span across multiple columns.

all

The element spans across all columns of the nearest multicol ancestor in the same block formatting context.

Initial

none

<!doctype html>
<html>
<head>
    <style>
        div
        {
            column-count: 3;
        }
        h1
        {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>all</button>
    <button>none</button>
    <div>
        <h1>column-span</h1>
        <p>column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span column-span</p>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("h1").style.columnSpan = myparameter.target.innerHTML;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>