grid-template-areas CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Oktober 2017 browserübergreifend verfügbar.
Die CSS-Eigenschaft grid-template-areas legt benannte Grid-Bereiche fest, wodurch die Zellen im Grid erstellt und ihnen Namen zugewiesen werden.
Diese Bereiche sind keinem bestimmten Grid-Element zugeordnet, können jedoch über die Grid-Positionierungseigenschaften grid-row-start, grid-row-end, grid-column-start, grid-column-end sowie deren Kurzformen grid-row, grid-column und grid-area referenziert werden.
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: rgb(0 0 255 / 0.2);
border: 3px solid blue;
grid-area: a;
}
#example-element :nth-child(2) {
background-color: rgb(255 0 200 / 0.2);
border: 3px solid rebeccapurple;
grid-area: b;
}
#example-element :nth-child(3) {
background-color: rgb(94 255 0 / 0.2);
border: 3px solid green;
grid-area: c;
}
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 Grid-Container definiert keine benannten Grid-Bereiche.
<string>-
Für jede aufgeführte separate Zeichenfolge wird eine Zeile erstellt, und für jede Zelle in der Zeichenfolge wird eine Spalte erstellt. Mehrere Zellen-Token mit demselben Namen innerhalb und zwischen Zeilen erstellen einen einzigen benannten Grid-Bereich, der sich über die entsprechenden Grid-Zellen erstreckt. Sofern diese Zellen kein Rechteck bilden, ist die Deklaration ungültig.
Alle verbleibenden unbenannten Bereiche in einem Grid können mithilfe von Nullzellen-Token referenziert werden. Ein Nullzellen-Token ist eine Sequenz aus einem oder mehreren
.-Zeichen (U+002E FULL STOP), beispielsweise.,...oder.....usw. Ein Nullzellen-Token kann verwendet werden, um leere Bereiche im Grid zu erstellen.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | Gridcontainer |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
grid-template-areas =
none |
<string>+
Beispiele
Benannte Grid-Bereiche 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 Grid-Container zu erstellen, den wir genutzt haben, um einen leeren Bereich in der unteren linken Ecke des Grids zu erzeugen.
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Grid Layout Module Level 2 # grid-template-areas-property |