Layering Grid Items

Grid items can be layered, so that intersecting grid areas overlap.

When using CSS Grid Layout, it's possible to have overlapping grid items due to intersecting grid areas, negative margins, or other positioning techniques. When this happens, items are layered according to order-modified document order and the z-index property.

Raw Document Order

If you don't specifically reorder or apply z-index to any grid items, any overlapping items will be ordered based on the raw document order. That is, the order they appear in the source markup.

Example:

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 90vh;
  background-color: beige;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
  position: relative;
  left: -20vw;
  top: 20vh;
}
.blue {
  background: steelblue;
  position: relative;
  left: -40vw;
  top: 5vh;
}
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
</style>

<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Order-Modified Document Order

The term order-modified document order refers to the order each grid item has after any ordering operations have been applied. This will usually be the source order if you haven't specifically reordered anything.

However, you can use the order property to reorder the items if required.

When you use this technique, the grid items are layered incrementing from the lowest numbered ordinal group. Items with the same ordinal group are laid out in raw document order (i.e. their order in the source document).

Here's an example:

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 90vh;
  background-color: beige;
}
.red {
  background: orangered;
  position: relative;
  left: -20vw;
  top: 20vh;
  order: 2;
}
.green {
  background: yellowgreen;
  position: relative;
  left: -40vw;
  top: 5vh;
  order: 3;
}
.blue {
  background: steelblue;
  top: 5vh;
  order: 1;
}
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
</style>

<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Using the `z-index` Property

You can also use the z-index property to layer the items. This property allows you to control the order of an element along the z-axis.

Here's an example:

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 90vh;
  background-color: beige;
}
.red {
  background: orangered;
  z-index: 3;
}
.green {
  background: yellowgreen;
  position: relative;
  left: -20vw;
  top: 20vh;
  z-index: 1;
}
.blue {
  background: steelblue;
  position: relative;
  left: -40vw;
  top: 5vh;
  z-index: 2;
}
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
</style>

<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Combining `z-index` and `order` Properties

If the grid items have been both reordered and had a z-index applied, the z-index values determine the ultimate stacking context.

This enables you to reorder the items without relinquishing control over the layering.

Here's an example:

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 90vh;
  background-color: beige;
}
.red {
  background: orangered;
  position: relative;
  left: -20vw;
  top: 20vh;
  order: 2;
  z-index: 1;
}
.green {
  background: yellowgreen;
  position: relative;
  left: -40vw;
  top: 5vh;
  order: 3;
  z-index: 2;
}
.blue {
  background: steelblue;
  top: 5vh;
  order: 1;
  z-index: 3;
}
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
</style>

<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Layering Grid Items

Raw Document Order

Order-Modified Document Order

Using the z-index Property

Combining z-index and order Properties

Using the `z-index` Property

Combining `z-index` and `order` Properties