grid-auto-flow

osbo.com | CSS | Properties | grid-auto-flow

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

grid-auto-flow: value;

object.style.gridAutoFlow = "value";

<'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.

row

<!doctype html>
<html>
<head>
    <style>
        #myid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
        }
        #myid > div {
            background-image: linear-gradient(135deg, white, gray);
        }
        #myid > div:nth-of-type(1) {
            background-image: linear-gradient(135deg, white, yellow);
            grid-column-start: 2;
        }
    </style>
    <script>
        function mouseover(value) {
            var element = document.getElementById("myid");
            element.style.gridAutoFlow = value;
            var element2 = element.getElementsByTagName("div")[0];
            element2.style.gridColumnStart = "2";
            element2.style.gridRowStart = "auto";
            if (value.includes("column")) {
                element2.style.gridColumnStart = "auto";
                element2.style.gridRowStart = "2";
            }
        }
    </script>
</head>
<body>
    <input onmouseover="mouseover(value)" type="button" value="column">
    <input onmouseover="mouseover(value)" type="button" value="column dense">
    <input onmouseover="mouseover(value)" type="button" value="row">
    <input onmouseover="mouseover(value)" type="button" value="row dense">
    <div id="myid">
        <div>grid-auto-flow1</div>
        <div>grid-auto-flow2</div>
        <div>grid-auto-flow3</div>
        <div>grid-auto-flow4</div>
        <div>grid-auto-flow5</div>
        <div>grid-auto-flow6</div>
        <div>grid-auto-flow7</div>
        <div>grid-auto-flow8</div>
        <div>grid-auto-flow9</div>
    </div>
</body>
</html>

grid-template-columns

grid-template-rows

World Wide Web Consortium (W3C)