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:
<!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><divclass="main"><divclass="Geeks1"></div><divclass="Geeks2"></div><divclass="Geeks3"></div><divclass="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><divclass="main"><divclass="Geeks1"></div><divclass="Geeks2"></div><divclass="Geeks3"></div><divclass="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><divclass="main"><divclass="Geeks1"></div><divclass="Geeks2"></div><divclass="Geeks3"></div><divclass="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><divclass="main"><divclass="Geeks1"></div><divclass="Geeks2"></div><divclass="Geeks3"></div><divclass="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.1
- Opera 44
.png)