Superposición de items

A diferencia de flexbox, en grid varios items pueden ocupar las mismas celdas. Esto permite crear superposiciones sin usar position: absolute.

Asigna a los items las mismas líneas de fila y columna, por completo o en parte.
Por defecto, se pinta encima el último item del HTML.
Con z-index controlas el orden de apilamiento sin necesidad de usar position.
Asignar grid-area: 1 / 1 a varios hijos es un patrón sencillo para apilar imagen y texto.

Ejemplo

Los dos items comparten celdas de la cuadrícula. Cambia el valor de z-index en la clase item para decidir cuál queda delante.

Selecciona z-index:

012

ResultadoEn vivoAncho del contenedor100%

html

<div class="container">
  <div class="child item">item</div>
  <div class="child other">other</div>
</div>

<div class="container">
  <div class="child item">item</div>
  <div class="child other">other</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 4rem);
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.item {
  background: #d9d2f5;
  grid-area: 1 / 1 / 3 / 3;
  z-index: 0;
}

.other {
  grid-area: 2 / 2 / 4 / 4;
  z-index: 1;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 4rem);
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.item {
  background: #d9d2f5;
  grid-area: 1 / 1 / 3 / 3;
  z-index: 0;
}

.other {
  grid-area: 2 / 2 / 4 / 4;
  z-index: 1;
}

Edita el código o usa los selectores: el resultado cambia al instante.