Skip to content
Related Articles

Related Articles

CSS | grid-auto-flow Property

Improve Article
Save Article
  • Last Updated : 28 Nov, 2022
Improve Article
Save Article

The grid-auto-flow property Specifying exactly how auto-placed items get flowed into the grid. Syntax:

grid-auto-flow: row|column|row dense|column dense;
  1. Row: auto-placement algorithm places items, by filling each row in turn, adding new rows as necessary. Syntax:
grid-auto-flow: row; 
  1. Example-1: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS grid-auto-flow Property
    </title>
     
    <style>
        .main {
            height: 200px;
            width: 200px;
            display: grid;
            grid-gap: 10px;
            grid-template: repeat(4, 1fr) / repeat(2, 1fr);
 
            /* grid-auto-flow property used here */
            grid-auto-flow: row;
        }
         
        .Geeks1 {
            background-color: red;
            grid-row-start: 3;
        }
         
        .Geeks2 {
            background-color: blue;
        }
         
        .Geeks3 {
            background-color: black;
        }
         
        .Geeks4 {
            grid-column-start: 2;
            background-color: orange;
        }
    </style>
</head>
 
<body>
    <div class = "main">
        <div class = "Geeks1"></div>
        <div class = "Geeks2"></div>
        <div class = "Geeks3"></div>
        <div class = "Geeks4"></div>
    </div>
</body>
 
</html>                       

  1. Output:
  2. Column: auto-placement algorithm places items, by filling each column in turn, adding new columns as necessary. Syntax:
    grid-auto-flow: column; 
  1. Example-2: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS grid-auto-flow Property
    </title>
     
    <style>
        .main {
            height: 200px;
            width: 200px;
            display: grid;
            grid-gap: 10px;
            grid-template: repeat(4, 1fr) / repeat(2, 1fr);
             
            /* grid-auto-flow property used here */
            grid-auto-flow: column;
        }
         
        .Geeks1 {
            background-color: red;
            grid-row-start: 3;
        }
         
        .Geeks2 {
            background-color: blue;
        }
         
        .Geeks3 {
            background-color: black;
        }
         
        .Geeks4 {
            grid-column-start: 2;
            background-color: orange;
        }
    </style>
</head>
 
<body>
    <div class = "main">
        <div class = "Geeks1"></div>
        <div class = "Geeks2"></div>
        <div class = "Geeks3"></div>
        <div class = "Geeks4"></div>
    </div>
</body>
 
</html>                   

  1. Output:
  2. Column Dense: specifying that the auto-placement algorithm uses a “dense” packing algorithm for column. Syntax:
   grid-auto-flow: column dense; 
  1. Example-3: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS grid-auto-flow Property
    </title>
     
    <style>
        .main {
            height: 200px;
            width: 200px;
            display: grid;
            grid-gap: 10px;
            grid-template: repeat(4, 1fr) / repeat(2, 1fr);
             
            /* grid-auto-flow property used here */
            grid-auto-flow: column dense;
        }
         
        .Geeks1 {
            background-color: red;
            grid-row-start: 3;
        }
         
        .Geeks2 {
            background-color: blue;
        }
         
        .Geeks3 {
            background-color: black;
        }
         
        .Geeks4 {
            grid-column-start: 2;
            background-color: orange;
        }
    </style>
</head>
 
<body>
    <div class = "main">
        <div class = "Geeks1"></div>
        <div class = "Geeks2"></div>
        <div class = "Geeks3"></div>
        <div class = "Geeks4"></div>
    </div>
</body>
 
</html>                   

  1. Output:
  2. Row Dense: specifying that the auto-placement algorithm uses a “dense” packing algorithm for rows. Syntax:
   grid-auto-flow: row dense; 
  1. Example-4: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS grid-auto-flow Property
    </title>
     
    <style>
        .main {
            height: 200px;
            width: 200px;
            display: grid;
            grid-gap: 10px;
            grid-template: repeat(4, 1fr) / repeat(2, 1fr);
             
            /* grid-auto-flow property used here */
            grid-auto-flow: row dense;
        }
         
        .Geeks1 {
            background-color: red;
            grid-row-start: 3;
        }
         
        .Geeks2 {
            background-color: blue;
        }
         
        .Geeks3 {
            background-color: black;
        }
         
        .Geeks4 {
            grid-column-start: 2;
            background-color: orange;
        }
    </style>
</head>
 
<body>
    <div class = "main">
        <div class = "Geeks1"></div>
        <div class = "Geeks2"></div>
        <div class = "Geeks3"></div>
        <div class = "Geeks4"></div>
    </div>
</body>
 
</html>                               

  1. Output:

Supported Browsers: The browser supported by CSS | grid-auto-flow Property are listed below:

  • Google Chrome 57
  • Mozilla Firefox 52
  • Edge 16
  • Safari 10.1
  • Opera 44

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!