CSS Subgrid
Aprende a heredar la estructura de filas y columnas de un contenedor padre para alinear elementos hijos independientes. Domina la herencia de grid para crear componentes internos que respeten la estructura del contenedor padre, eliminando desajustes visuales.
Hasta ahora, cada contenedor Grid era independiente. Si querías que los elementos dentro de dos tarjetas distintas se alinearan entre sí, tenías que usar trucos o tamaños fijos.
Tradicionalmente, en CSS Grid, los elementos hijos de un contenedor grid podían posicionarse en la rejilla, pero sus propios hijos (los 'nietos' del contenedor principal) vivían en un contexto de layout totalmente independiente. Esto creaba un problema clásico: ¿cómo alinear los títulos de varias tarjetas si cada una tiene una altura de contenido distinta?
CSS Subgrid (parte de Grid Level 2) resuelve esto permitiendo que un ítem de grid adopte las filas o columnas de su padre como si fueran propias. Esto significa que el contenido de múltiples componentes puede 'engancharse' a la misma guía global, garantizando una alineación milimétrica sin importar las variaciones de contenido. Subgrid permite que un hijo de un Grid use la misma rejilla (grid tracks) que su padre.
En esta lección aprenderás no solo la sintaxis, sino la lógica de transferencia de tracks, el manejo de nombres de líneas y cómo gestionar los gaps en estructuras anidadas. Dominaremos cómo crear layouts 'conectados' vertical y horizontalmente.
- El aislamiento de los contextos de formato.
- Antes de subgrid, si tenías un `grid-template-rows: repeat(3, auto)`, cada tarjeta en un listado creaba su propia estructura interna. Si el título de la 'Tarjeta A' ocupaba dos líneas y el de la 'Tarjeta B' solo una, los elementos siguientes (como imágenes o botones) quedaban desalineados entre sí.
- Intentar solucionar esto con `display: contents` rompía la accesibilidad y el estilado del contenedor intermedio. Subgrid es la solución definitiva porque mantiene la semántica del HTML y la integridad del diseño.
- Heredando dimensiones del ancestro.
- Para que subgrid funcione, debemos seguir este flujo:
La limitación del Grid convencional
El aislamiento de los contextos de formato.
Antes de subgrid, si tenías un `grid-template-rows: repeat(3, auto)`, cada tarjeta en un listado creaba su propia estructura interna. Si el título de la 'Tarjeta A' ocupaba dos líneas y el de la 'Tarjeta B' solo una, los elementos siguientes (como imágenes o botones) quedaban desalineados entre sí.
Intentar solucionar esto con `display: contents` rompía la accesibilidad y el estilado del contenedor intermedio. Subgrid es la solución definitiva porque mantiene la semántica del HTML y la integridad del diseño.
Activación y Reglas de Oro
Heredando dimensiones del ancestro.
Para que subgrid funcione, debemos seguir este flujo:
1. El **Padre** define una rejilla (ej. 3 columnas).
2. El **Hijo** se posiciona en esas columnas (ej. `grid-column: 1 / 4`) y activa `display: grid`.
3. El **Hijo** declara `grid-template-columns: subgrid`. Ahora, los elementos dentro del hijo se colocarán directamente sobre las columnas del padre.
Gaps y Márgenes
¿Qué pasa con el espacio entre elementos?
Por defecto, un subgrid utiliza el `column-gap` y `row-gap` definido en el padre. Sin embargo, CSS permite sobrescribir estos valores en el hijo. Si lo haces, los elementos se seguirán alineando a las líneas del padre, pero el 'aire' entre ellos cambiará.
Esto es extremadamente útil para crear layouts de revistas donde el espaciado interno de un artículo debe ser más denso que el espaciado entre artículos del feed principal.
Limitaciones y Buenas Prácticas
No es una varita mágica.
Subgrid es increíblemente poderoso, pero no es adecuado para todos los casos. Si tu diseño no requiere una alineación estricta entre componentes, usar subgrid puede complicar innecesariamente tu CSS.
Además, ten cuidado con la profundidad de anidamiento. Un subgrid dentro de otro subgrid puede volverse difícil de depurar y mantener. La regla general es: úsalo para componentes que realmente necesitan esa conexión visual, como tarjetas en un listado o elementos de un dashboard.
Soporte en Navegadores
¿Puedo usarlo ya?
Subgrid es compatible con la mayoría de los navegadores modernos, incluyendo Chrome, Firefox y Edge. Sin embargo, Safari aún no lo soporta completamente. Si tu audiencia incluye usuarios de Safari, considera usar subgrid solo para componentes no críticos o proporcionar una experiencia degradada.
Impacto en el Rendimiento
¿Subgrid ralentiza mi sitio?
En términos de rendimiento, subgrid no introduce una sobrecarga significativa en la mayoría de los casos. Sin embargo, como con cualquier característica avanzada de CSS, un uso excesivo o anidamientos profundos pueden afectar la velocidad de renderizado. La clave es usarlo con moderación y siempre probar el rendimiento en dispositivos reales.
El problema que resuelve
Alinear 'hermanos lejanos'.
Imagina tres tarjetas con un título, una imagen y un texto. Si un título es más largo que otro, la imagen de la tarjeta 1 no estará alineada con la de la tarjeta 2.
Con un grid normal, cada tarjeta es su propio mundo. Con subgrid, la tarjeta le dice al padre: 'Cédeme tus filas para que mis hijos se ajusten a ellas'.
Cómo activar Subgrid
Heredando las pistas (tracks) del padre.
Para usarlo, el elemento debe ser hijo de un contenedor grid y tener su propio `display: grid`.
En lugar de definir tamaños en `grid-template-columns` o `rows`, usamos la palabra clave `subgrid`.
Diferencia Visual
Sin Subgrid vs Con Subgrid
- **Sin Subgrid:** Los elementos internos de un componente se ajustan a su propio contenido, rompiendo la armonía visual de la fila.
- **Con Subgrid:** Todos los encabezados de una fila miden lo mismo, todas las imágenes empiezan a la misma altura, independientemente del texto.
