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 spezifiziert benannte Gitterbereiche, indem sie die Zellen im Gitter festlegt und ihnen Namen zuweist.

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 keinem bestimmten Gitterelement zugeordnet, können jedoch über die Gitter-Platzierungseigenschaften 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 Gitter-Container 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 dem gleichen Namen innerhalb und zwischen Zeilen erzeugen einen einzigen benannten Gitterbereich, der die entsprechenden Gitterzellen überspannt. Wenn diese Zellen kein Rechteck bilden, ist die Deklaration ungültig.

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

Formale Definition

Anfangswertnone
Anwendbar aufGridcontainer
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

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

Beispiele

Benannte Gitterbereiche spezifizieren

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 Gitter-Container zu erstellen, den wir benutzt haben, um einen leeren Raum in der unteren linken Ecke des Gitters zu erzeugen.

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

Siehe auch