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: This example demonstrate the use of CSS Grid property.
<!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;
}
.Beginner1 {
background-color: red;
grid-row-start: 3;
}
.Beginner2 {
background-color: blue;
}
.Beginner3 {
background-color: black;
}
.Beginner4 {
grid-column-start: 2;
background-color: orange;
}
</style>
</head>
<body>
<div class = "main">
<div class = "Beginner1"></div>
<div class = "Beginner2"></div>
<div class = "Beginner3"></div>
<div class = "Beginner4"></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.
<!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;
}
.Beginner1 {
background-color: red;
grid-row-start: 3;
}
.Beginner2 {
background-color: blue;
}
.Beginner3 {
background-color: black;
}
.Beginner4 {
grid-column-start: 2;
background-color: orange;
}
</style>
</head>
<body>
<div class = "main">
<div class = "Beginner1"></div>
<div class = "Beginner2"></div>
<div class = "Beginner3"></div>
<div class = "Beginner4"></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.
<!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;
}
.Beginner1 {
background-color: red;
grid-row-start: 3;
}
.Beginner2 {
background-color: blue;
}
.Beginner3 {
background-color: black;
}
.Beginner4 {
grid-column-start: 2;
background-color: orange;
}
</style>
</head>
<body>
<div class = "main">
<div class = "Beginner1"></div>
<div class = "Beginner2"></div>
<div class = "Beginner3"></div>
<div class = "Beginner4"></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.
<!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;
}
.Beginner1 {
background-color: red;
grid-row-start: 3;
}
.Beginner2 {
background-color: blue;
}
.Beginner3 {
background-color: black;
}
.Beginner4 {
grid-column-start: 2;
background-color: orange;
}
</style>
</head>
<body>
<div class = "main">
<div class = "Beginner1"></div>
<div class = "Beginner2"></div>
<div class = "Beginner3"></div>
<div class = "Beginner4"></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