Implicit named grid lines Box alignment align-items

Grid supports the order property also found in Flexbox. If you are explicitly positioning Grid Items then order will affect painting order, and therefore the order in which items stack up where no z-index has been applied.

If using auto-placement then the order property will affect how items are placed on the grid. In this example, all of the .css-grid-item boxes have been given an order of 1, so they continue to be positioned in DOM order. However, box1 has an order of 3 and box2 an order of 2. These boxes have a higher order value so are positioned after all of the boxes with an order value of 1.

Credit to gridbyexample.com for inspiring this example.

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

1

2

3

4

5

6

7

8

9

10

11

12