grid-template-areas

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

La propiedad CSS grid-template-areas especifica nombres para cada una de las grid areas.

css

/* Keyword value */
grid-template-areas: none;

/* <string> values */
grid-template-areas: "a b";
grid-template-areas:
  "a b b"
  "a c d";

/* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: unset;

Estas áreas no están asociadas a ningún elemento particular de la cuadrícula, pero pueden referenciarse desde otras propiedades de posicionamiento en la cuadrícula: grid-row-start, grid-row-end, grid-column-start, grid-column-end, y sus formas abreviadas grid-row, grid-column, and grid-area.

Valor inicial	`none`
Applies to	grid containers
Heredable	no
Valor calculado	como se especifica
Animation type	discrete

Sintaxis

Valores

none: El contenedor de la cuadrícula no define ningún nombre para las áreas de la cuadrícula.
<string>+: Las filas se crean listando líneas de cadenas separadas, mientras que las columnas se reflejan en cada una de las celdas que aparecen en la cadena. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.

Formal syntax

grid-template-areas = 
  none       |
  <string>+

Example

HTML

html

<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>

CSS

css

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav  main"
    "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

Result

Especificaciones

Specification
CSS Grid Layout Module Level 2 # grid-template-areas-property

Compatibilidad con navegadores

BCD tables only load in the browser