222 Chapter 17
Fortunately, a shorthand property is available for this list of rules. The
shorthand is called grid—however, you can only use it to set either explicit
or implicit grids, not both. To use it to set implicit grids, use this syntax:E { grid: grid-auto-flow grid-auto-columns / grid-auto-rows; }So here is the shorthand for the implicit grid rules shown in the previ-
ous code:E { grid: row 1fr / 80px; }The grid syntax for setting explicit grids is exactly the same as for the
grid-template property you saw earlier in this chapter. That being the case,
here is the shorthand for the explicit grid rules shown at the start of this
section:E { grid: repeat(3, 1fr) / 'a b b' 80px 'a c d'; }You might find it strange that two shorthand properties do exactly the
same thing. I can only agree with you.Grid Item Stacking Order
When placing items on a grid, areas will sometimes overlap. To handle such
an eventuality, you can create a stacking order to define the way that items
are stacked in the grid. For example, you could say that items that start in
the third row should be stacked on top of items that start in the first row,
regardless of their order in the DOM.
You can change the stacking order with the z-index property. The items
with the highest z-index value will be stacked above all others. For example,
the following markup shows two div elements that will become grid items:<div class="grid-item item-one">...</div>
<div class="grid-item item-two">...</div>I’ll place both items in the grid, but by adding the following code I
ensure that item-one will be stacked on top of item-two by making its starting
column and row greater than those of item-two:.item-one {
grid-column: 2 / 4;
grid-row: 2;
}
.item-two {
grid-column: 1 / 3;
grid-row: 1 / 3;
}