CSS Grid revolucionó cómo se estructuran los diseños web. Sin embargo, un desafío común permanecía: alinear elementos anidados (nietos) dentro de elementos de cuadrícula padre a las líneas de cuadrícula principal.

Esto se resolvió con la introducción de CSS Subgrid, una actualización de la especificación de CSS Grid Layout. Este artículo explica los fundamentos de CSS Subgrid y cómo aplicarlo a problemas de diseño comunes como listas de tarjetas.

1. ¿Qué es CSS Subgrid?

Tradicionalmente, solo los hijos directos de un contenedor Grid pueden posicionarse a lo largo de las pistas de cuadrícula definidas. Cuando declaras otra cuadrícula dentro de un elemento Grid, esa cuadrícula anidada está completamente aislada de la cuadrícula padre externa.

Considera un diseño de “tarjeta de producto” estándar:

• Cada tarjeta contiene una imagen, un título y una descripción.
• Los títulos varían en longitud, con algunos que abarcan múltiples líneas.

Usando CSS Grid tradicional, alinear los encabezados o descripciones de las tarjetas horizontalmente requería alturas fijas, márgenes mágicos o recálculos con JavaScript.

Subgrid resuelve esto permitiendo que los contenedores de cuadrícula anidados hereden las pistas de columna y/o fila definidas en el contenedor padre, vinculando su alineación estructural.

2. Guía práctica: Alineando alturas de tarjetas con Subgrid

Implementemos una cuadrícula responsive donde los elementos de tarjeta anidados alineen sus bloques de contenido dinámicamente.

Estructura HTML

<div class="grid-container">
  <!-- Tarjeta 1 -->
  <div class="card">
    <img src="thumb1.jpg" alt="Miniatura">
    <h3>Título corto</h3>
    <p>Una breve descripción aquí.</p>
  </div>
  <!-- Tarjeta 2 -->
  <div class="card">
    <img src="thumb2.jpg" alt="Miniatura">
    <h3>Este es un título muy largo que abarca múltiples líneas</h3>
    <p>Una descripción más larga para mostrar cómo se alinean las alturas.</p>
  </div>
</div>

Implementación CSS

/* Cuadrícula del contenedor padre */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* Estilo de tarjeta integrando Subgrid */
.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: auto auto 1fr;
  row-gap: 10px;
}

/* Aplicar Subgrid cuando sea soportado */
@supports (grid-template-rows: subgrid) {
  .card {
    grid-template-rows: subgrid;
  }
}

Cómo funciona el código

• Al especificar grid-row: span 3;, instruimos a cada tarjeta para ocupar exactamente tres filas de la cuadrícula del contenedor padre.
• La declaración grid-template-rows: subgrid; hereda las definiciones de fila de la cuadrícula padre.
• Incluso si el encabezado de la Tarjeta 2 se envuelve a tres líneas y se expande, el encabezado de la Tarjeta 1 coincide automáticamente con esa altura porque ambos títulos comparten la misma pista de fila virtual del padre.

3. Resumen: Diseño moderno con Subgrid

CSS Subgrid es totalmente compatible con todos los navegadores modernos principales (Chrome, Edge, Firefox, Safari). Elimina la necesidad de frágiles emparejadores de altura con JavaScript y permite a los diseñadores construir diseños de cuadrícula flexibles y perfectos en píxeles. Úsalo en cuadrículas de productos, widgets de panel de control y diseños de revista para elevar tus diseños UI frontend.