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.
Diegrid-template-areasCSS-Eigenschaft spezifiziert benannteGrid-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> <div> <div> <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 mit keinem bestimmten Grid-Element verbunden, können aber von den Grid-Platzierungseigenschaftengrid-row-start,grid-row-end,grid-column-start,grid-column-end und deren Kurzformengrid-row,grid-column undgrid-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
noneDer Grid-Container definiert keine benannten Grid-Bereiche.
<string>Für jede separate Zeichenkette wird eine Zeile erstellt und für jede Zelle in der Zeichenkette eine Spalte. Mehrere Zellentoken mit demselben Namen innerhalb und zwischen Zeilen erstellen einen einzigen benannten Grid-Bereich, der die entsprechenden Grid-Zellen umfasst. Wenn diese Zellen kein Rechteck bilden, ist die Deklaration ungültig.
Alle verbleibenden unbenannten Bereiche in einem Grid können mitNull-Zellen-Token bezeichnet werden. Ein Null-Zellen-Token ist eine Folge von einem oder mehreren
.(U+002E FULL STOP)-Zeichen, z.B..,...oder.....usw. Ein Null-Zellen-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 spezifizieren
HTML
<div> <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 schaffen.
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Grid Layout Module Level 2 # grid-template-areas-property |