A grid item as a new positioning context Grid auto-flow column

If you declare a Grid on an element and do not position the child elements then the auto-placememt algorithm dictates what the browser should do about those unplaced grid items.

In this example I have a set of 12 boxes. I have declared a Grid and created rows and columns but not positioned any of the children. As you can see the boxes all lay out on the Grid despite having no placement assigned to them.

Credit to gridbyexample.com for inspiring this example.

[fl_row] {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(6, 1fr);
}

1

2

3

4

5

6

7

8

9

10

11

12