Áreas de grid con nombre en CSS

Dibujar el layout como una imagen y luego soltar elementos en celdas con nombre.

.page {
  display: grid;
  grid-template-columns: 16rem 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "side   main"
    "footer footer";
  min-height: 100vh;
}

.page > header { grid-area: header; }
.page > aside  { grid-area: side; }
.page > main   { grid-area: main; }
.page > footer { grid-area: footer; }

Cómo funciona

1. grid-template-areas es un mapa ASCII del layout.
2. Un punto marca una celda dejada vacía a propósito.
3. Cada hijo reclama su celda con grid-area.

Palabras clave y builtins usados aquí

• display
• grid
• rem
• vh

El intento, en números

Líneas

15

Caracteres a escribir

329

Tokens

73

Ritmo de tres estrellas

80 tpm

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

Escribe este fragmento

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

← Anterior Siguiente →