Ubicar elementos en las líneas del grid en CSS

Abarcar tracks por número de línea y dejar que el navegador llene los huecos.

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 8rem;
  grid-auto-flow: dense;
  gap: 0.5rem;
}

.gallery .wide {
  grid-column: span 2;
}

.gallery .tall {
  grid-row: span 2;
}

.gallery .hero {
  grid-column: 1 / -1;
}

Cómo funciona

1. grid-column: 1 / 3 abarca de la línea uno a la línea tres.
2. span 2 es la forma relativa y sobrevive a un reacomodo.
3. grid-auto-flow: dense rellena los huecos hacia atrás.

Palabras clave y builtins usados aquí

• display
• gap
• grid
• rem

El intento, en números

Líneas

19

Caracteres a escribir

244

Tokens

66

Ritmo de tres estrellas

80 tpm

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

Escribe este fragmento

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

← Anterior Siguiente →