CSS grid-auto-flow Property
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
Please Login to comment...