Columnas de grid en CSS

Un grid definido por su lista de tracks de columna, con el contenido fluyendo en filas.

.layout {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 1.5rem;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1rem;
  row-gap: 2rem;
}

Cómo funciona

1. repeat() te ahorra escribir el mismo track dos veces.
2. fr reparte el espacio que queda tras los tracks fijos.
3. gap aplica a ambos ejes a menos que lo separes.

Palabras clave y builtins usados aquí

• display
• gap
• grid
• rem

El intento, en números

Líneas

12

Caracteres a escribir

174

Tokens

48

Ritmo de tres estrellas

80 tpm

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

Escribe este fragmento

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

← Anterior Siguiente →