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 inicialnone
Applies togrid containers
Heredableno
Valor calculadocomo se especifica
Animation typediscrete

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
grid-template-areas
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also