Grid auto-flow column
The default behavior of Grid Auto Flow is to layout the elements by row, working along the row until there are no more slots then moving on to the next row. If a row is not declared then an implicit grid track will be created to hold the items.
You can change this behavior by using the grid-auto-flow
property. The default value is row
but you can also specify column
. The elements will then be laid out column by column, adding new columns if needed.
Credit to gridbyexample.com for inspiring this example.
[fl_row] { display: grid; grid-gap: 10px; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto auto auto; grid-auto-flow: column; }