--- title: grid-template-areas slug: Web/CSS/grid-template-areas tags: - CSS - CSS Eigenschaft - CSS Grid - CSS Property - Reference - Referenz translation_of: Web/CSS/grid-template-areas ---

Die grid-template-areas CSS Eigenschaft spezifiziert benannte {{glossary("grid areas")}}.

{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}

Diese areas sind nicht mit einem bestimmten grid item assoziiert, sondern können von den grid-placement Eigenschaften {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, und ihren Kurzformen  {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, und {{cssxref("grid-area")}} referenziert werden.

Syntax

/* 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;

Werte

none
Der grid container definiert keine benannten grid areas.
{{cssxref("<string>")}}+
Für jeden seperaten String wird eine Reihe, und für jede Zelle in dem String wird eine Spalte erstellt. Mehrere benannte Zelltokens innerhalb und zwischen den Reihen sind eine einzelne benannte grid area welche die entsprechenden grid Zellen überspannt. Wenn diese Zellen kein Quader formen ist de Deklaration ungültig.

Formaler Syntax

{{csssyntax}}

Beispiel

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;
}

Ergebnis

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

Spezifikationen

Specification Status Comment
{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}} {{Spec2("CSS3 Grid")}} Ursprüngliche Definition

{{cssinfo}}

Browser kompatibilität

 

{{Compat("css.properties.grid-template-areas")}}

 

Siehe auch