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.

Die grid-template-areas CSS Eigenschaft legt benannte Gitterbereiche fest, indem sie die Zellen im Raster definiert und ihnen Namen zuweist.

Probieren Sie es aus

Diese Bereiche sind nicht mit einem bestimmten Gitterelement verbunden, können jedoch über die Gitterplatzierungseigenschaften grid-row-start, grid-row-end, grid-column-start, grid-column-end sowie deren Kurzschreibweisen grid-row, grid-column und grid-area referenziert werden.

Syntax

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

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

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

Werte

none

Der Gittercontainer definiert keine benannten Gitterbereiche.

<string>+

Für jede angegebene Zeichenkette wird eine Zeile erstellt, und für jede Zelle in der Zeichenkette wird eine Spalte erstellt. Mehrere Zell-Tokens mit demselben Namen innerhalb und zwischen Zeilen erzeugen einen einzigen benannten Gitterbereich, der sich über die entsprechenden Gitterzellen erstreckt. Wenn diese Zellen kein Rechteck bilden, ist die Deklaration ungültig.

Alle verbleibenden unbenannten Bereiche in einem Raster können mithilfe von Null-Zell-Tokens referenziert werden. Ein Null-Zell-Token ist eine Folge von einem oder mehreren . (U+002E FULL STOP) Zeichen, z.B. ., ... oder ..... usw. Ein Null-Zell-Token kann verwendet werden, um leere Räume im Raster zu schaffen.

Formale Definition

Anfangswertnone
Anwendbar aufGridcontainer
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

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

Beispiele

Benannte Gitterbereiche festlegen

HTML

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

CSS

css
#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav  main"
    ".  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;
}

Im obigen Code wurde ein Null-Token (.) verwendet, um einen unbenannten Bereich im Gittercontainer zu erstellen, den wir genutzt haben, um einen leeren Raum in der unteren linken Ecke des Rasters zu schaffen.

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch