By default, grid items get placed in rows, from left to right in a grid.
The grid-auto-flow property can used to controls this auto-placement.
Let's look at some examples to understand it further:
grid-auto-flow: row This is the default value, places the grid items row
wise.
grid-auto-flow: column Places the grid items column wise.
grid-auto-flow: dense dense is a magical value, it uses an algorithm to
fill any empty spaces in most efficient way.
Without grid-auto-flow: dense our layout has lots of empty spaces, which does
not look good.
Using grid-auto-flow: dense places the grid items to fill most of the empty
spaces in the grid .