Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
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 Oktober 2017.
Die grid-template-areas-Eigenschaft von CSS spezifiziert benannte Grid-Bereiche, legt die Zellen im Grid fest 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: 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;
}
Diese Bereiche sind keinem bestimmten Grid-Element zugeordnet, können jedoch von den Grid-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
/* 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 aufgelistete Zeichenkette wird eine Zeile erstellt, und für jede Zelle in der Zeichenkette wird eine Spalte erstellt. Mehrere Zell-Token mit demselben Namen innerhalb und zwischen Zeilen erzeugen einen einzigen benannten Grid-Bereich, der die entsprechenden Grid-Zellen überspannt. Sofern diese Zellen kein Rechteck bilden, ist die Deklaration ungültig.
Alle verbleibenden unbenannten Bereiche in einem Grid können mittels null-Zelltokens referenziert werden. Ein null-Zelltoken ist eine Sequenz von einem oder mehreren
.(U+002E FULL STOP)-Zeichen, z. B..,...oder.....usw. Ein null-Zelltoken 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 angeben
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 verwendet haben, um einen leeren Platz in der unteren linken Ecke des Grids zu schaffen.
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Grid Layout Module Level 2 # grid-template-areas-property |
Browser-Kompatibilität
Loading...