CSS
Explica cómo subgrid permite que un grid anidado reutilice las filas o columnas del grid padre para alinear contenido entre componentes.
subgrid permite que una grid anidada utilice los tracks de su parent en uno o ambos ejes.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}Cards independientes:
.card {
display: grid;
grid-template-rows: auto auto 1fr;
}Cada card calcula sus rows por separado. Títulos y botones no necesariamente se alinean entre cards.
Con subgrid, las rows pueden compartir líneas del parent.
.form-row {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}El hijo adopta column tracks del parent en el área que ocupa.
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}Debe ocupar varias parent rows para tener tracks que heredar.
.child {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}El subgrid hereda gaps del parent por defecto, aunque puede sobrescribirlos.
.child {
column-gap: 0.5rem;
}Los nombres de líneas del parent pueden estar disponibles y el subgrid puede añadir nombres locales.
Esto permite contratos de layout sin duplicar medidas.
El child continúa siendo un elemento y un grid container. Solo comparte track sizing.
No es equivalente a display: contents.
display: contents con riesgos.Subgrid aporta cuando la alineación entre niveles es realmente importante.
.product-list {
display: grid;
grid-template-columns: max-content 1fr max-content;
gap: 0.75rem 1rem;
}
.product {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}Cada row comparte columnas de nombre, contenido y precio.
¿Por qué una card con grid-template-rows: subgrid suele necesitar grid-row: span 3?
Porque debe ocupar varias rows del parent para heredar esas líneas como su subgrid.
Box alignment y gap unifica los conceptos de alineación usados por Grid y Flexbox.