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
/* 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
Initialer Wert | none |
---|---|
Anwendbar auf | Gridcontainer |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
Benannte Gitterbereiche festlegen
HTML
<div id="page">
<header>Header</header>
<nav>Navigation</nav>
<main>Main area</main>
<footer>Footer</footer>
</div>
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