Subgrid en CSS

Un grid hijo que toma prestados los tracks del padre: las tarjetas se alinean por dentro.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: 0.5rem;
}

.card h3 { margin: 0; }
.card footer { align-self: end; }

Cómo funciona

grid-template-rows: subgrid adopta las líneas de fila del padre.
El título, el cuerpo y el pie de cada tarjeta comparten entonces una misma base.
El hijo sigue abarcando las filas que le des en el padre.

Palabras clave y builtins usados aquí

display
gap
grid
margin
rem

El intento, en números

Líneas: 16
Caracteres a escribir: 277
Tokens: 77
Ritmo de tres estrellas: 80 tpm

Al ritmo de tres estrellas de 80 tokens por minuto, este intento toma unos 58 segundos.

Escribe este fragmento

Paso 7 de 7 en Grid; paso 13 de 24 en Flexbox y grid.

← Anterior Siguiente →