Subgrid para contenido anidado alineado

Un desafío habitual: tiene una cuadrícula de tarjetas, cada una con un encabezado, un cuerpo y un pie. Sin subgrid, los elementos de tarjetas distintas no pueden alinearse con las mismas líneas base porque cada tarjeta tiene su propio diseño independiente.

subgrid es un valor para grid-template-columns o grid-template-rows que hace que una cuadrícula anidada herede y participe en las definiciones de pistas de la cuadrícula principal.

Un elemento de cuadrícula que también es un contenedor de cuadrícula puede usar subgrid para alinear sus elementos secundarios con las pistas de la cuadrícula principal:

De forma similar, usar subgrid en las columnas permite alinear los elementos anidados con las pistas de columnas de la cuadrícula principal, lo que resulta útil para alinear pares de etiquetas y valores o campos de formulario en varias columnas de tarjetas.

Sin subgrid, puede alinear parcialmente el contenido mediante align-content o alturas fijas, pero este enfoque es frágil. Subgrid permite una alineación real basada en las alturas del contenido.

Alineación de pares de etiquetas y campos de entrada en varias columnas de formulario:

Una subgrid puede abarcar varias pistas de la cuadrícula principal y heredar pistas en ambas direcciones:

Cuando una subgrid hereda pistas con nombre de la cuadrícula principal, esos nombres están disponibles para colocar elementos dentro del contenedor de la subgrid.

Las subgrids heredan de forma predeterminada los valores de gap de la cuadrícula principal. La cuadrícula anidada participa en el mismo sistema de separaciones.

Subgrid está disponible en Firefox desde 2019. Chrome añadió compatibilidad en 2023. Actualmente, todos los navegadores modernos lo admiten. Verifique la compatibilidad para su público objetivo antes de usarlo en producción.

Proporcione una alternativa para los navegadores antiguos mediante alturas fijas o alineación con Flexbox antes de añadir subgrid como mejora:

¿Qué hace grid-template-rows: subgrid en un elemento de cuadrícula?

Subgrid resuelve el problema de alineación del contenido de cuadrículas anidadas, como las cuadrículas de tarjetas cuyos elementos deben alinearse con la misma línea base aunque estén en tarjetas distintas. Use grid-template-rows: subgrid en los elementos de cuadrícula que abarquen varias filas y grid-template-columns: subgrid para el contenido anidado alineado por columnas. Actualmente, la compatibilidad con los navegadores modernos es universal.