Avanzadocss
CSS Subgrid: Alineación Multidimensional
Sincroniza filas y columnas de elementos anidados compartiendo la cuadrícula del contenedor padre.
El problema clásico de las tarjetas desalineadas
En una cuadrícula de tarjetas con títulos, descripciones y botones de compra, si un título tiene tres líneas, empuja los botones hacia abajo y rompe la alineación visual. Subgrid permite que los hijos del grid participen en las pistas de la cuadrícula padre.
css
1.grid-container {
2 display: grid;
3 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
4 grid-auto-rows: auto auto 1fr auto; /* Título, Subtítulo, Contenido, Botón */
5 gap: 1.5rem;
6}
7
8.card {
9 display: grid;
10 grid-template-rows: subgrid; /* Hereda las pistas del padre */
11 grid-row: span 4; /* Ocupa exactamente 4 filas */
12}
13
14/* Todos los títulos, descripciones y botones quedarán alineados al pixel */Prueba lo aprendido
Escribe código y ejecútalo directamente en el navegador.
Live Sandbox (HTML)
Output