## 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)

| Navegador   | Soporte  | Notas                         |
| ----------- | -------- | ----------------------------- |
| Chrome 117+ | Completo | Desde Sept 2023               |
| Edge 117+   | Completo | Basado en Chromium            |
| Firefox 71+ | Completo | Desde Dic 2019 (¡el primero!) |
| Safari 16+  | Completo | Desde Sept 2022               |

**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:

```css
.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

```css
.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

```css
.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:

```css
.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

```css
.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;
}
```

```html
<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

```css
.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

```css
.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

```css
.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:

```css
.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:

```css
.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

```css
.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

```css
/* ❌ 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

```css
/* ❌ 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.