Grid Layout 223
You can see the result in the example on the left of Figure 17-11: item-one
is stacked above item-two. But if you increase the z-index of item-two like so:
.item-two { z-index: 2; }
you’ll see that item-two is now stacked above item-one, as shown on the right
of Figure 17-11.
Figure 17-11: Comparing stacking order: (left) stacking follows placement, (right) stacking
set by z-index
An alternative approach uses the order property, introduced as part of
the Flexbox Module (see Chapter 15). In explicit grids, this property acts
exactly like z-index, changing the stacking order; in implicit grids, however,
it also changes the order in which items are placed in the grid.
You can see this in action in Figure 17-12, where I’ve flowed three grid
items (item-one, item-two, and item-three) into a grid with a grid-auto-flow
value of column. In the left grid, the items are flowed into the grid in the
order in which they appear in the DOM, but in the right grid, the order of
two of the items is changed, as shown in Figure 17-12.
.item-one { order: 2; }
.item-two { order: 3; }
Figure 17-12: Stacking with the order property in implicit grids: (left) in DOM order and
(right) order set with the order property
Internet Explorer’s Grid Layout Syntax
Internet Explorer 10 was the first browser to implement the Grid Layout
properties, although with a syntax that has since become outdated. So you
can replicate certain grid layouts in IE10 and IE11 if you use caution, but
with very strict limits—the most notable being that you can only create
explicit grids.
All of the IE grid properties use the -ms- prefix, as does the value of the
display property:
E { display: -ms-grid; }
