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
>
<
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:
<!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:
<!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:
<!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.1
- Opera 44