Las filas que el grid crea por ti en CSS

Tú dimensionas las columnas; las filas siguen llegando, las hayas planeado o no.

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

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

.sidebar-layout {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(12rem, 1fr);
}

Cómo funciona

1. grid-auto-rows dimensiona cada fila que el grid crea implícitamente.
2. grid-auto-flow: dense rellena los huecos, a costa del orden del documento.
3. minmax() con auto deja que una fila crezca más allá de su piso.

Palabras clave y builtins usados aquí

• display
• gap
• grid
• rem

El intento, en números

Líneas

16

Caracteres a escribir

317

Tokens

83

Ritmo de tres estrellas

80 tpm

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

Escribe este fragmento

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

← Anterior Siguiente →