Introducción

Alinear componentes anidados entre columnas en layouts de tarjetas es un desafío común. CSS Grid subgrid resuelve esta limitación permitiendo que grids anidados hereden los tracks del padre.

La limitación de los grids anidados

Con Flexbox, los contenedores de tarjetas se alinean en altura pero los elementos internos (títulos, descripciones, botones) no se alinean entre tarjetas hermanas.

Solución con subgrid

.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
.card-title { grid-row: 1; } .card-desc { grid-row: 2; } .card-btn { grid-row: 3; }

Los títulos, descripciones y botones se alinean perfectamente entre tarjetas, independientemente de la longitud del contenido.

Alineación horizontal

También se puede aplicar subgrid horizontalmente para alinear columnas, útil en formularios para alinear etiquetas y campos.

Soporte

Compatible con todos los navegadores modernos (Safari, Firefox, Chrome, Edge). Elimina la necesidad de JavaScript para igualar alturas.