grid-auto-flow

Description
Syntax
Examples
Links

Description

The grid-auto-flow property for CSS specifies exactly how auto-placed items get flowed into the grid.

Syntax

CSS

grid-auto-flow: value;

JS

object.style.gridAutoFlow = "value";

Values

<'grid-auto-flow'> = [ row | column ] || dense

row

Places items by filling each row in turn, adding new rows as necessary.

column

Places items by filling each column in turn, adding new columns as necessary.

dense

Attempts to fill in holes earlier in the grid if smaller items come up later.

Initial

row

<!doctype html>
<html>
<head>
    <style>
        .myclass
        {
            display: grid;
        }
        .myclass > div
        {
            background-image: linear-gradient(135deg, white, lightgray);
        }
        .myclass > div:nth-of-type(1)
        {
            background-image: linear-gradient(135deg, white, yellow);
            grid-column-start: 2;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>column</button>
    <button>column dense</button>
    <button>row</button>
    <button>row dense</button>
    <div class="myclass">
        <div>grid-auto-flow1</div>
        <div>grid-auto-flow2</div>
        <div>grid-auto-flow3</div>
        <div>grid-auto-flow4</div>
    </div>
    <script>
        function myfunction(myparameter)
        {
            const myproperty = myparameter.target.innerHTML;
            document.querySelector(".myclass").style.gridAutoFlow = myproperty;
            const mystyle = document.querySelector(".myclass > div:nth-of-type(1)").style;
            mystyle.gridColumnStart = "2";
            mystyle.gridRowStart = "auto";
            if(myproperty.includes("column"))
            {
                mystyle.gridColumnStart = "auto";
                mystyle.gridRowStart = "2";
            }
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>