Maquetación Web Dinámica / Layouts II: CSS Grid completo
subgrid: alinear los interiores de las tarjetas
Un problema que todo maquetador sufre: tres tarjetas hermanas, una con título de dos líneas — y sus botones quedan a alturas distintas, como dientes chuecos. El grid del padre alinea las TARJETAS, pero no sus interiores. subgrid existe exactamente para esto.
El problema, en vivo
<div class="grid-malo">
<article class="tarjeta"><h3>Título corto</h3><p>Texto breve.</p><a href="#">Ver más</a></article>
<article class="tarjeta"><h3>Un título bastante más largo que dobla</h3><p>Este texto es más largo y empuja todo hacia abajo de forma distinta.</p><a href="#">Ver más</a></article>
<article class="tarjeta"><h3>Otro</h3><p>Corto.</p><a href="#">Ver más</a></article>
</div>body { font-family: system-ui; padding: 16px; }
.grid-malo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tarjeta { background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; }
.tarjeta h3 { font-size: 15px; margin: 0 0 8px; color: #1e293b; }
.tarjeta p { font-size: 13px; color: #64748b; margin: 0 0 12px; line-height: 1.5; }
.tarjeta a { color: #6d28d9; font-weight: 600; font-size: 13px; text-decoration: none; }Los "Ver más" bailan cada uno a su altura. Las tarjetas están alineadas; sus contenidos, no — porque cada tarjeta es un universo aparte.
La solución: heredar la retícula del padre
Con eso, el título, el texto y el botón de CADA tarjeta viven en filas COMPARTIDAS entre todas: la fila de títulos mide como el título más alto, la de textos como el texto más largo — y los botones quedan en una línea perfecta.
<div class="grid-bueno">
<article class="tarjeta"><h3>Título corto</h3><p>Texto breve.</p><a href="#">Ver más</a></article>
<article class="tarjeta"><h3>Un título bastante más largo que dobla</h3><p>Este texto es más largo y empuja distinto.</p><a href="#">Ver más</a></article>
<article class="tarjeta"><h3>Otro</h3><p>Corto.</p><a href="#">Ver más</a></article>
</div>body { font-family: system-ui; padding: 16px; }
.grid-bueno { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tarjeta { background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.tarjeta h3 { font-size: 15px; margin: 0 0 8px; color: #1e293b; }
.tarjeta p { font-size: 13px; color: #64748b; margin: 0 0 12px; line-height: 1.5; }
.tarjeta a { color: #6d28d9; font-weight: 600; font-size: 13px; text-decoration: none; align-self: end; }¿Qué par de propiedades convierte una tarjeta en heredera de las filas de su grid padre?
Mini-reto
Aplica subgrid a las tarjetas de "Más noticias" de tu periódico (título, resumen, fecha — span 3). Escribe un titular kilométrico en una de ellas y verifica que las fechas de TODAS siguen en línea perfecta.
Qué sigue
Toda la teoría de Grid está en tu caja. La próxima lección es su lección de patrones: holy grail, dashboard, bento y revista editorial — los cuatro esqueletos que sostienen la web.