CSS grid-auto-flow Property
Last Updated :
22 Apr, 2024
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: This example demonstrate the use of CSS Grid property.
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: This example demonstrate the use of CSS Grid property.
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: This example demonstrate the use of CSS Grid property.
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: This example demonstrate the use of CSS Grid property.
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
Share your thoughts in the comments
Please Login to comment...