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 CSS-Eigenschaft grid-template-areas gibt benannte Rasterbereiche an, definiert die Zellen im Raster und weist ihnen Namen zu.

Probieren Sie es aus

grid-template-areas:
  "a a a"
  "b c c"
  "b c c";

grid-template-areas:
  "b b a"
  "b b c"
  "b b c";

grid-template-areas:
  "a a ."
  "a a ."
  ". b c";

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One (a)</div>
      <div>Two (b)</div>
      <div>Three (c)</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, minmax(40px, auto));
  grid-gap: 10px;
  width: 200px;
}

#example-element :nth-child(1) {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  grid-area: a;
}

#example-element :nth-child(2) {
  background-color: rgba(255, 0, 200, 0.2);
  border: 3px solid rebeccapurple;
  grid-area: b;
}

#example-element :nth-child(3) {
  background-color: rgba(94, 255, 0, 0.2);
  border: 3px solid green;
  grid-area: c;
}

Diese Bereiche sind mit keinem bestimmten Rasterelement verbunden, können jedoch von den Rasterplatzierungs-Eigenschaften grid-row-start, grid-row-end, grid-column-start, grid-column-end und deren Kurzformen 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 Rasterbehälter definiert keine benannten Rasterbereiche.

<string>

Für jede separate Zeichenkette wird eine Reihe erstellt, und für jede Zelle in der Zeichenkette wird eine Spalte erstellt. Mehrere Zell-Token mit demselben Namen innerhalb und zwischen Zeilen erstellen einen einzelnen benannten Rasterbereich, der sich über die entsprechenden Rasterzellen erstreckt. Wenn diese Zellen kein Rechteck bilden, ist die Deklaration ungültig.

Alle restlichen unbenannten Bereiche in einem Raster können mit Null-Zellen-Token referenziert werden. Ein Null-Zellen-Token ist eine Folge von einem oder mehreren . (U+002E VOLLSTANDPUNKT) Zeichen, z.B. ., ..., oder ..... usw. Ein Null-Zellen-Token kann verwendet werden, um leere Bereiche im Raster zu erstellen.

Formale Definition

Anfangswertnone
Anwendbar aufGridcontainer
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

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

Beispiele

Benannte Rasterbereiche angeben

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 Rasterbehälter zu erstellen, den wir verwendet haben, um einen leeren Bereich in der unteren linken Ecke des Rasters zu erstellen.

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

Siehe auch