✨ CSS grid stack

Traditionally, the way we've achieved overlapping elements on top of each other has been position:absolute.
If you also want to center stuff, you gotta use a combination of top/bottom left/right and the corresponding translate transform.
It is not the easiest thing to work with, it requires a bit of code, it's error prone and it feels as fragile as it looks in code.

Fear no more, though, as I'm about to share my latest favorite technique: stacking elements on top of each other with CSS grid!

.stack {
  display: grid;
  grid-template-areas: 'stack';
}

.stack > * {
  grid-area: stack;
  place-self: center;
  text-align: center;
}

<div class="stack">
  <img src="cover.jpg" />
  <article>
    <h2>Hello!</h2>
    <p>Breakfast is ready.</p>
  </article>
</div>

Hello!

Breakfast is ready.

We are defining a grid with a single template area that we called stack (you can give it whatever name you want) and then we're placing every direct children of this container in the stack area, centered.
It feels quite magic ✨

The .stack utility it's all it takes (plus some cosmetic styling) to achieve the example below:

<div class="stack circle">
  <div></div>
  <div></div>
  <div></div>
  <p>💖</p>
</div>