Alinear dentro de un grid en CSS

Alinear los tracks en el contenedor y los elementos dentro de su propia celda.

.board {
  display: grid;
  grid-template-columns: repeat(3, 6rem);
  place-content: center;
  place-items: center;
  gap: 0.25rem;
  min-height: 100vh;
}

.board .score {
  place-self: start end;
}

Cómo funciona

1. place-items es la forma abreviada de alinear y justificar elementos.
2. place-content mueve el conjunto de tracks dentro del contenedor.
3. Un hijo puede pasar por encima del contenedor con place-self.

Palabras clave y builtins usados aquí

• display
• gap
• grid
• rem
• vh

El intento, en números

Líneas

12

Caracteres a escribir

184

Tokens

47

Ritmo de tres estrellas

80 tpm

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

Escribe este fragmento

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

← Anterior Siguiente →