La sintaxis de subgrid

Subgrid tiene una sintaxis de una palabra y tres reglas que hay que tener claras: solo funciona en un elemento que ya sea grid, solo afecta al eje en el que lo declares, y el elemento tiene que abarcar explícitamente las pistas que quiere heredar. Fuera de eso no hay nada más que aprender, lo cual dice bastante de lo bien resuelta que quedó la funcionalidad.

La declaración

subgrid es un valor de grid-template-rows y de grid-template-columns. Lo escribes en el elemento hijo, que debe ser a su vez un contenedor grid:

.tarjetas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;   /* tres filas compartidas */
  gap: 1.5rem;
}
.tarjeta {
  grid-row: span 3;          /* abarca las tres filas del padre */
  display: grid;             /* es un grid... */
  grid-template-rows: subgrid; /* ...que hereda las filas del padre */
}

Con esas cuatro líneas, los hijos de .tarjeta se colocan en las mismas pistas de fila que definió .tarjetas. El título de las tres tarjetas ocupa la misma pista, así que las tres tienen la misma altura: la del título más alto. Lo mismo con la descripción y con el enlace.

Las dos condiciones que se suelen olvidar son estas.

El elemento debe ser grid. grid-template-rows: subgrid en un elemento sin display: grid no hace nada. Y display: inline-grid también vale.

El elemento debe abarcar pistas. Un elemento que ocupa una sola fila no tiene nada que heredar: hereda una pista, que es la suya. Necesitas grid-row: span 3 o una colocación explícita entre líneas.

Un eje, o los dos

Cada eje se decide por separado y son independientes. Puedes heredar solo las filas, solo las columnas, o los dos:

/* Solo filas: las columnas internas son propias */
.a { display: grid; grid-template-rows: subgrid; grid-template-columns: auto 1fr; }

/* Solo columnas */
.b { display: grid; grid-template-columns: subgrid; }

/* Los dos */
.c { display: grid; grid-template: subgrid / subgrid; }

El caso de las tarjetas es de filas: quieres que los elementos internos se alineen verticalmente entre tarjetas, y cada tarjeta tiene su propia disposición horizontal.

El caso de un formulario es de columnas: quieres que las etiquetas y los campos se alineen horizontalmente entre filas, y cada fila tiene su propia altura.

El caso de los dos ejes a la vez es menos frecuente y aparece en tablas de datos construidas con divs o en calendarios.

El eje que no declares como subgrid se comporta con total normalidad: puedes definir pistas, usar fr, repeat, lo que quieras. No hay ninguna interferencia entre los dos.

Cuando el subgrid abarca más pistas de las que hay

Si el subgrid abarca más pistas de las que su padre le ofrece, las pistas que faltan se generan como implícitas dentro del subgrid. Esas pistas no existen en el padre, así que no están compartidas con los hermanos y no se alinean.

.tarjetas { grid-template-rows: auto auto; }   /* solo dos filas */
.tarjeta  { grid-row: span 2; display: grid; grid-template-rows: subgrid; }
/* Si la tarjeta tiene tres hijos, el tercero cae en una pista
   implícita del subgrid y no se alinea con nada */

El síntoma es reconocible: dos de los tres elementos se alinean perfectamente y el último no. Cuando lo veas, cuenta las pistas.

También ocurre al revés: si el subgrid abarca menos pistas de las que hay, simplemente hereda las que abarca. No pasa nada raro, solo que las pistas que no abarcas no participan.

El sistema de coordenadas del subgrid

Dentro de un subgrid, las líneas se renumeran empezando por 1 en la primera pista que el subgrid abarca. Esto es importante y es fácil de olvidar.

.tarjetas { display: grid; grid-template-rows: repeat(6, auto); }
.tarjeta {
  grid-row: 3 / span 3;         /* ocupa las filas 3, 4 y 5 del padre */
  display: grid;
  grid-template-rows: subgrid;
}
/* Dentro de la tarjeta, esas filas son la 1, la 2 y la 3 */
.tarjeta > .titulo { grid-row: 1; }

Es decir: el subgrid ve un sistema de coordenadas local que empieza donde empieza él. Los números que uses dentro no son los del padre. Los índices negativos también funcionan y se refieren al final del subgrid, no al del padre.

Esa renumeración es lo que hace que un componente con subgrid sea reutilizable: puedes colocarlo en cualquier posición de la rejilla padre y su CSS interno no cambia.

/* Este componente funciona en cualquier posición de su padre */
.fila-datos {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 4;
}
.fila-datos > .nombre  { grid-column: 1; }
.fila-datos > .estado  { grid-column: 2; }
.fila-datos > .fecha   { grid-column: 3; }
.fila-datos > .acciones{ grid-column: 4; }