CSS Grid Subgrid: Dominando la alineación de elementos anidados

CSS Grid Subgrid es una característica poderosa que resuelve un problema común: cuando tienes componentes anidados y quieres que sus elementos internos se alineen con la grilla del contenedor padre. Sin subgrid, los hijos de una grilla crean su propio contexto de grilla independiente, lo que rompe la alineación visual.

El problema: Grillas aisladas

Cuando defines un elemento como display: grid y luego creas un grid-item que también es display: grid, ese elemento anidado no hereda la estructura de líneas de la grilla padre. Cada grilla es independiente.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 16px;
}

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

En este escenario, el .card es un grid-item dentro de .container, pero sus columnas internas no se alinean con las columnas del padre. Esto puede crear desalineaciones visuales que afectan la coherencia del diseño.

La solución: Subgrid

Subgrid permite que un elemento hijo herede la estructura de líneas (tracks) de la grilla padre. En lugar de crear una nueva grilla, el hijo participa en la grilla del padre.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 16px;
}

.card {
  display: grid;
  grid-template-columns: subgrid;
  gap: 16px;
}

Ahora el .card usa las tres columnas del .container, y sus elementos internos se alinean automáticamente con la grilla padre.

Sintaxis de subgrid

Puedes aplicar subgrid a columnas, filas o ambas:

Directivas básicas de subgrid

La forma más simple de usar subgrid es:

/* Solo en columnas */
grid-template-columns: subgrid;

/* Solo en filas */
grid-template-rows: subgrid;

/* En ambas direcciones */
grid-template-columns: subgrid;
grid-template-rows: subgrid;

También puedes especificar el número de tracks que ocupa el elemento:

/* El subgrid ocupa 3 columnas */
grid-column: span 3;
grid-template-columns: subgrid;

Caso práctico: Card con cabecera y contenido

Imagina un diseño donde tienes tarjetas con estructura interna compleja. Quieres que todas las tarjetas compartan la misma alineación, y que los títulos, imágenes y botones dentro de cada tarjeta se alineen verticalmente.

<div class="grid-container">
  <article class="card">
    <h3 class="card-title">Tarjeta 1</h3>
    <img class="card-image" src="..." alt="..." />
    <p class="card-text">Contenido</p>
    <button class="card-button">Acción</button>
  </article>

  <article class="card">
    <h3 class="card-title">Tarjeta 2</h3>
    <img class="card-image" src="..." alt="..." />
    <p class="card-text">Contenido más largo</p>
    <button class="card-button">Acción</button>
  </article>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.card {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
}

.card-title {
  grid-row: 1;
}

.card-image {
  grid-row: 2;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 4px;
}

.card-text {
  grid-row: 3;
}

.card-button {
  grid-row: 4;
}

Sin subgrid, el contenido de cada tarjeta estaría desalineado. Con subgrid, todos los elementos de todas las tarjetas se alinean perfectamente.

Subgrid en dos dimensiones

También puedes usar subgrid en filas y columnas simultáneamente para un control total:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 1fr 50px;
  gap: 16px;
}

.panel {
  display: grid;
  grid-column: 1 / 3; /* Ocupa 2 columnas */
  grid-row: 1 / 3; /* Ocupa 2 filas */
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  gap: 16px;
}

Ahora el .panel hereda tanto las columnas como las filas del contenedor, permitiendo una alineación completa en dos ejes.

Casos de uso comunes

Layouts de galería con metadatos

Una galería donde cada imagen tiene título, descripción y botones que deben alinearse verticalmente:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.gallery-item {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
}

Tablas semánticas con filas anidadas

Si necesitas filas expandibles o agrupadas:

.table {
  display: grid;
  grid-template-columns: 100px 1fr 150px 80px;
  gap: 16px;
}

.row-group {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1; /* Abarca todas las columnas */
}

Formularios con múltiples secciones

Mantener alineación de etiquetas y campos entre secciones:

.form {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
}

.form-section {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  gap: 12px;
}

Limitaciones y consideraciones

Compatibilidad del navegador

Subgrid es relativamente nuevo. Verifica la compatibilidad con tu público objetivo. Chrome y Firefox lo soportan desde versiones recientes, pero Safari tiene soporte limitado en algunas versiones.

Verificar compatibilidad en tiempo de compilación

Puedes usar media queries de CSS para proporcionar fallbacks en navegadores sin soporte:

.card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@supports (grid-template-columns: subgrid) {
  .card {
    grid-template-columns: subgrid;
  }
}

El gap se hereda

El gap del padre no se hereda automáticamente en subgrid. Debes especificarlo de nuevo en el elemento con subgrid.

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.child {
  grid-template-columns: subgrid;
  gap: 16px; /* Necesario especificar aquí también */
}

Tracks implícitos

Subgrid solo hereda los tracks explícitos definidos en la grilla padre. Si la grilla padre crea tracks implícitos (porque el contenido excede grid-template-columns), subgrid no los hereda.

Alternativas cuando subgrid no es viable

Si necesitas soporte en navegadores más antiguos, considera:

• CSS Variables para alineación manual: Usa custom properties para mantener anchuras consistentes.
• Flexbox anidado: Para layouts más simples, flexbox puede ser suficiente.
• Márgenes y padding consistentes: Aunque menos automático, puede lograr alineación visual.

Conclusión

CSS Grid Subgrid es una herramienta esencial para mantener la coherencia visual en aplicaciones modernas. Es especialmente útil cuando tienes componentes reutilizables que necesitan alinearse con el contexto más amplio. Aunque tiene limitaciones de compatibilidad, es una inversión valiosa en código mantenible y diseño consistente.

Experimenta con subgrid en tus próximos proyectos y verás cómo simplifica la gestión de grillas complejas.