Skip to content
Related Articles

Related Articles

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;
  1. 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:

  2. 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:

  3. 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:

  4. 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 arrow_drop_up
Recommended Articles
Page :