Introducción
CSS Grid transformó la creación de layouts. Subgrid, su extensión, permite que elementos anidados se alineen con el grid del contenedor padre. Layouts complejos nunca fueron tan simples.
¿Qué es Subgrid?
Subgrid permite que un grid anidado herede las pistas del grid padre. Con grid-template-columns: subgrid, los hijos del grid anidado se alinean con las columnas del grid principal.
Cuándo usar Subgrid
Tablas de datos con headers alineados, tarjetas en grid donde los títulos deben alinearse verticalmente, y formularios complejos con etiquetas alineadas.
Grid responsivo
Usa auto-fit y minmax para grids que se adaptan automáticamente al espacio disponible. Sin media queries, sin cálculos manuales.
Grid por áreas
Define áreas con grid-template-areas para layouts visuales. Cambia la disposición en diferentes tamaños solo reordenando las áreas.
Conclusión
CSS Grid y Subgrid son herramientas indispensables para diseño web. En Vynta creamos layouts precisos y adaptables con las capacidades nativas de CSS.