Open In App

CSS grid-auto-flow Property

Last Updated : 26 May, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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: 

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>                       


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: 

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>                   


Output:

 

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

Syntax:

   grid-auto-flow: column dense; 

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>                   


Output:

 

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

Syntax:

   grid-auto-flow: row dense; 

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>                               


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


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads