CSS Grid y Subgrid 2026: Soporte Universal Desbloquea Nuevos Patrones

Por Jorge Saud · 2 de enero de 2026

Subgrid: La Pieza Faltante Ahora Es Universal

CSS Grid revolucionó el layout en 2017. Subgrid, que permite a elementos anidados participar en el grid de su padre, tardó años en lograr soporte completo de navegadores. En 2026, está en todas partes - y cambia todo sobre layouts complejos.

Soporte de Navegadores (2026)

Soporte global: ~95%

Subgrid está listo para producción. No se necesitan fallbacks para la mayoría de audiencias.

El Problema que Resuelve Subgrid

Sin Subgrid

Los elementos anidados no pueden alinearse con el grid padre:

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

.card {
  display: grid;
  /* Esto crea un NUEVO grid, independiente del padre */
  /* Headers, contenido, footers no se alinearán entre cards */
}

Resultado: Headers de cards a diferentes alturas, contenido desalineado.

Con Subgrid

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto; /* Define patrón de filas */
  gap: 1rem;
}

.card {
  display: grid;
  grid-row: span 3; /* Abarca las 3 filas */
  grid-template-rows: subgrid; /* Hereda filas del padre */
}

Resultado: Todos los headers se alinean, todas las áreas de contenido se alinean, todos los footers se alinean.

Fundamentos de Subgrid

Sintaxis

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.child {
  /* Posición en el grid padre */
  grid-column: 1 / -1; /* Abarca todas las columnas */
  grid-row: 1 / 3; /* Abarca 2 filas */

  /* Convertirse en grid que hereda tracks */
  display: grid;
  grid-template-columns: subgrid; /* Usa tracks de columna del padre */
  grid-template-rows: subgrid; /* Usa tracks de fila del padre */
}

Solo Un Eje

Puedes usar subgrid en un eje mientras defines el otro:

.child {
  display: grid;
  grid-template-columns: subgrid; /* Hereda columnas */
  grid-template-rows: auto 1fr; /* Define propias filas */
}

Patrones de Producción

Patrón 1: Grid de Cards Alineadas

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  /* Tracks de fila implícitos para cada sección de card */
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4; /* header, imagen, contenido, footer */
  gap: 0;
}

.card-header {
  grid-row: 1;
}
.card-image {
  grid-row: 2;
}
.card-content {
  grid-row: 3;
}
.card-footer {
  grid-row: 4;
}

<div class="card-container">
  <article class="card">
    <header class="card-header">Título Corto</header>
    <img class="card-image" src="..." alt="..." />
    <div class="card-content">Contenido aquí...</div>
    <footer class="card-footer">Leer más</footer>
  </article>
  <article class="card">
    <header class="card-header">Título Mucho Más Largo Que Se Envuelve</header>
    <img class="card-image" src="..." alt="..." />
    <div class="card-content">Más contenido...</div>
    <footer class="card-footer">Leer más</footer>
  </article>
</div>

Todos los headers se alinean sin importar la longitud del texto.

Patrón 2: Layout de Formulario

.form {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1rem 2rem;
}

.form-group {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.form-group label {
  grid-column: 1;
  text-align: right;
}

.form-group input {
  grid-column: 2;
}

Labels e inputs perfectamente alineados sin anchos fijos.

Patrón 3: Tabla Comparativa de Productos

.comparison {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  gap: 0;
}

.comparison-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.comparison-row > * {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.feature-name {
  grid-column: 1;
  font-weight: 600;
}

Patrón 4: Layout de Revista

.magazine-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, minmax(100px, auto));
  gap: 1rem;
}

.feature-article {
  grid-column: 1 / 8;
  grid-row: 1 / 4;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.feature-article .headline {
  grid-column: 1 / -1;
  grid-row: 1;
}

.feature-article .image {
  grid-column: 1 / 5;
  grid-row: 2 / 4;
}

.feature-article .text {
  grid-column: 5 / -1;
  grid-row: 2 / 4;
}

Subgrid con Herencia de Gap

Subgrid hereda el gap del padre:

.parent {
  display: grid;
  gap: 2rem;
}

.child {
  display: grid;
  grid-template-columns: subgrid;
  /* Hereda gap de 2rem */

  /* Sobrescribir si es necesario */
  gap: 1rem;
}

Líneas con Nombre con Subgrid

Las líneas de grid con nombre funcionan con subgrid:

.parent {
  display: grid;
  grid-template-columns:
    [sidebar-start] 200px
    [sidebar-end content-start] 1fr
    [content-end];
}

.child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}

.child-element {
  grid-column: content-start / content-end;
  /* Usa las líneas nombradas del padre */
}

Combinando con Container Queries

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card {
  container: card / inline-size;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

@container card (width < 350px) {
  .card-content {
    /* Ajustar contenido para cards angostas */
    font-size: 0.9rem;
  }
}

Errores Comunes

Error 1: Olvidar Abarcar

/* ❌ El hijo no abarca suficientes tracks */
.child {
  /* Implícitamente grid-row: span 1 */
  grid-template-rows: subgrid; /* Solo obtiene 1 fila */
}

/* ✅ Abarcar los tracks que necesitas */
.child {
  grid-row: span 3;
  grid-template-rows: subgrid; /* Obtiene 3 filas */
}

Error 2: Mezclar Subgrid con Tracks Explícitos

/* ❌ No se puede mezclar subgrid con tamaños explícitos */
.child {
  grid-template-columns: subgrid 100px 1fr; /* Inválido */
}

/* ✅ Todo o nada por eje */
.child {
  grid-template-columns: subgrid;
  /* O */
  grid-template-columns: 100px 1fr;
}

Notas de Rendimiento

Subgrid está bien optimizado en navegadores modernos:

1. Paso de layout único - Padre e hijos calculan juntos
2. No se necesita JavaScript - Alineación con CSS puro
3. Reflow mínimo - Los cambios están contenidos dentro del contexto del grid

Puntos Clave

1. Soporte universal - Subgrid funciona en todos los navegadores principales (95%+)
2. Alineación resuelta - Elementos anidados se alinean con tracks del grid padre
3. Uno o ambos ejes - Aplica subgrid a columnas, filas, o ambos
4. Herencia de gap - Subgrid hereda el gap del padre (sobrescribible)
5. Líneas nombradas funcionan - Los nombres de línea del padre disponibles en subgrid

Subgrid completa CSS Grid. Layouts que antes requerían JavaScript o CSS hacky ahora son triviales. Si estás construyendo cards, formularios, o cualquier componente con partes que necesitan alinearse entre instancias, subgrid es la respuesta.