CSS - Grid auto

Quiz

Description

The grid-auto-flow property allows you to control how grid items are automatically placed within the grid container when there is available space.

Example

Here is an example where grid item inserted using columns and rows −

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>CSS - grid-auto-flow</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-template-rows: auto auto auto;
            color: white;
            text-align: center;
            width: 360px;
            border: 2px solid rgb(29, 231, 80);
            background-color: rgb(29, 231, 80);
        }
        .grid-container > div {
            background-color: rgb(228, 9, 9);
            border: 2px solid rgb(29, 231, 80);
            padding: 10px;
        }     
    </style>
</head>
<body>
    <h3>The grid items inserted using columns.</h3>
    <div class="grid-container" style="grid-auto-flow: column;">
        <div class="grid-item1">Grid item 1</div>
        <div class="grid-item2">Grid item 2</div>
        <div class="grid-item3">Grid item 3</div>
        <div class="grid-item4">Grid item 4</div>
        <div class="grid-item5">Grid item 5</div>
        <div class="grid-item6">Grid item 6</div>
    </div>

    <h3>The grid items inserted using rows.</h3>
    <div class="grid-container" style="grid-auto-flow: row;">
        <div class="grid-item1">Grid item 1</div>
        <div class="grid-item2">Grid item 2</div>
        <div class="grid-item3">Grid item 3</div>
        <div class="grid-item4">Grid item 4</div>
        <div class="grid-item5">Grid item 5</div>
    </div>
</body>
</html>

The grid-auto-columns property is used to define the size of implicitly created columns in a CSS Grid layout.

Here is an example where grid item inserted using columns −

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>CSS - grid-auto-columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        .grid-container {
            display: grid;
            grid-auto-columns: 70px;
            color: white;
            text-align: center;
            width: 360px;
            border: 2px solid rgb(29, 231, 80);
            background-color: rgb(29, 231, 80);
        }
        .grid-container > div {
            background-color: rgb(228, 9, 9);
            border: 2px solid rgb(29, 231, 80);
            padding: 10px;
        }
        .grid-item1 { grid-area: 1 / 1 / 2 / 2; }
        .grid-item2 { grid-area: 1 / 2 / 2 / 3; }
        .grid-item3 { grid-area: 1 / 3 / 2 / 4; }
        .grid-item4 { grid-area: 2 / 1 / 3 / 2; }
        .grid-item5 { grid-area: 2 / 2 / 3 / 3; }
        .grid-item6 { grid-area: 2 / 3 / 3 / 4; }    
    </style>
</head>
<body>
    <h3>The size grid items is set to the 70px per column.</h3>
    <div class="grid-container">
        <div class="grid-item1">Grid item 1</div>
        <div class="grid-item2">Grid item 2</div>
        <div class="grid-item3">Grid item 3</div>
        <div class="grid-item4">Grid item 4</div>
        <div class="grid-item5">Grid item 5</div>
        <div class="grid-item6">Grid item 6</div>
    </div>
</body>
</html>

The grid-auto-rows property is used to specify the size of automatically generated rows in a CSS Grid container.

Here is an example where grid item inserted using rows −

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>CSS - grid-auto-rows</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
       .grid-container {
            display: grid;
            grid-auto-rows: 80px;
            color: white;
            text-align: center;
            width: 360px;
            border: 2px solid rgb(29, 231, 80);
            background-color: rgb(29, 231, 80);
        }
        .grid-container > div {
            background-color: rgb(228, 9, 9);
            border: 2px solid rgb(29, 231, 80);
            padding: 10px;
        }
        .grid-item1 { grid-area: 1 / 1 / 2 / 2; }
        .grid-item2 { grid-area: 1 / 2 / 2 / 3; }
        .grid-item3 { grid-area: 1 / 3 / 2 / 4; }
        .grid-item4 { grid-area: 2 / 1 / 3 / 2; }
        .grid-item5 { grid-area: 2 / 2 / 3 / 3; }
        .grid-item6 { grid-area: 2 / 3 / 3 / 4; }    
    </style>
</head>
<body>
    <h3>The size grid items is set to the 80px per row.</h3>
    <div class="grid-container">
        <div class="grid-item1">Grid item 1</div>
        <div class="grid-item2">Grid item 2</div>
        <div class="grid-item3">Grid item 3</div>
        <div class="grid-item4">Grid item 4</div>
        <div class="grid-item5">Grid item 5</div>
        <div class="grid-item6">Grid item 6</div>
    </div>
</body>
</html>

Print Page