Layering elements with CSS grid

One of my favorite little css tricks is using grid to stack elements when needed. This may be a no-duh moment for other humans, but hopefully it can help some folks out.

// Here's the foundation
.parent {
  display: grid;
}

.first-child,
.section-child {
  grid-area: 1 / 1;
}

// Simplier example
.parent {
  display: grid;
}

.parent * {
  grid-area: 1 / 1;
}

I often use these rules for stacking in a hero, but basically any place where a background element is needed with content on top. Cards, full width call to actions, you name it. Pretty neat!

See the Pen Grid Area Hero by Glenn Weatherson (@gweatherson) on CodePen.

Link to Codepen

The older method would have been using absolute positioning and then vertically and/or horizontally centering the above element(s) using transforms or some other form of positioning. This works, but it now feels hacky and is typically more code.