Grid auto-flow column The auto-fill keyword in repeating track definitions

If a child element has been placed then the auto-placement algorithm will place that first and then work out what to do with any child elements that have not been placed.

In this example, I have placed box2 on the grid and also made it span 3 grid lines. The rest of the boxes continue to lay out as before.

Credit to gridbyexample.com for inspiring this example.

[fl_row] {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(6, 1fr);
}
[fl_row] .box2 {
  grid-column: 3 / 6;
  grid-row: 2 / 3;
}

1

2

3

4

5

6

7

8

9

10

11

12