--- title: grid-template-areas slug: Web/CSS/grid-template-areas translation_of: Web/CSS/grid-template-areas ---

La propiedad CSS grid-template-areas especifica nombres para cada una de las {{glossary("grid areas")}}.

/* 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: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, y sus formas abreviadas {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.

{{cssinfo}}

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

{{csssyntax}}

Example

HTML

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

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

{{EmbedLiveSample("Example", "100%", "250px")}}

Specifications

Specification Status Comment
{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}} {{Spec2("CSS3 Grid")}} Initial definition

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatChrome("57.0")}}[1] {{CompatNo}}[3] {{CompatGeckoDesktop("52.0")}}[2] {{CompatNo}}[3] {{CompatOpera(44)}}[4] {{CompatSafari(10.1)}}
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatChrome("57.0")}}[1] {{CompatChrome("57.0")}}[1] {{CompatGeckoMobile("52.0")}}[2] {{CompatNo}}[3] {{CompatOperaMobile(44)}} {{CompatSafari(10.3)}}

[1] Implemented behind the experimental Web Platform features flag in chrome://flags since Chrome 29.0.

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

[3] Internet Explorer and Edge implement an older version of the specification, which doesn't define this property.

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

See also