CSS | grid-auto-flow Property

Last Updated : 08 Aug, 2019

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;

Row: auto-placement algorithm places items, by filling each row in turn, adding new rows as necessary.

Syntax:

grid-auto-flow: row;

Example-1:

<!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>                        

Output:

Column: auto-placement algorithm places items, by filling each column in turn, adding new columns as necessary.

Syntax:

    grid-auto-flow: column;

Example-2:

<!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>                    

Output:

Column Dense: specifying that the auto-placement algorithm uses a “dense” packing algorithm for column.

Syntax:

   grid-auto-flow: column dense;

Example-3:

<!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>                    

Output:

Row Dense: specifying that the auto-placement algorithm uses a “dense” packing algorithm for rows.
Syntax:

   grid-auto-flow: row dense;

Example-4:

<!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>                                

Output:

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

Google Chrome 57
Mozilla Firefox 52
Edge 16
Safari 10
Opera 44

My Personal Notes

Related Articles