Explora las nuevas capacidades de CSS Grid Level 2: subgrid y masonry layouts. Aprende cómo estas características resuelven problemas complejos de alineación y crean layouts dinámicos con código más simple y mantenible.
Ejemplo de layout con subgrid y masonry
Contenido del Artículo
Subgrid: Alineación Profunda
Extiende la cuadrícula padre a elementos hijos:
Heredar tracks
grid-template-columns/rows: subgrid
Alineación precisa
Elementos anidados alineados a grid principal
Simplificación
Elimina grids anidados complejos
/* Grid contenedor */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Item con subgrid */
.grid-item {
display: grid;
grid-template-rows: subgrid; /* Hereda filas del padre */
grid-row: span 3; /* Ocupa 3 filas del padre */
}
/* Elementos internos alineados */
.item-header, .item-content, .item-footer {
grid-column: 1 / -1; /* Ocupa todas las columnas del subgrid */
}
Masonry Layout
Diseño de columnas con elementos de altura variable:
/* Masonry con grid (solo Firefox) */
.masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry; /* Propiedad experimental */
gap: 20px;
}
/* Fallback para otros navegadores */
@supports not (grid-template-rows: masonry) {
.masonry {
column-count: 4;
column-gap: 20px;
}
.masonry-item {
break-inside: avoid;
margin-bottom: 20px;
}
}Masonry CSS nativo solo soportado en Firefox (2023), pero viene en camino para otros navegadores
Casos de Uso Avanzados
Aplicaciones prácticas para layouts complejos:
Formularios complejos
Campos alineados en múltiples niveles
Galerías
Masonry para imágenes de altura variable
Layouts editoriales
Artículos con elementos internos alineados
Dashboards
Widgets con encabezados y pies alineados
/* Dashboard con subgrid */
.dashboard {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
}
.widget {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}
.widget-header {
grid-row: 1;
}
.widget-content {
grid-row: 2;
}
.widget-footer {
grid-row: 3;
}Soporte y Fallbacks
Implementación con compatibilidad cruzada:
@supports (grid-template-rows: subgrid) {
/* Implementación moderna */
}
@supports not (grid-template-rows: subgrid) {
/* Fallback con grids anidados */
.grid-item {
display: grid;
grid-template-rows: auto 1fr auto; /* Réplica manual */
}
}| Característica | Soporte | Alternativa |
|---|---|---|
| Subgrid | Firefox, Safari 16+ | Grids anidados complejos |
| Masonry CSS | Solo Firefox | column-count o JS |
| Grid Level 2 | 88% global (2023) | @supports con fallbacks |
