CSS | grid-auto-flow Property - GeeksforGeeks

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:
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:
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:
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:
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:
   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
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?