Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.
Die grid-template-areas
CSS Eigenschaft spezifiziert benannte grid areas.
Der Code für dieses interaktive Beispiel befindet sich in einem GitHub repository. Wenn du zum interaktiven Beispielprojekt beitragen möchtest klone bitte https://github.com/mdn/interactive-examples und sende uns einen pull request.
Diese areas sind nicht mit einem bestimmten grid item assoziiert, sondern können von den grid-placement Eigenschaften grid-row-start
, grid-row-end
, grid-column-start
, grid-column-end
, und ihren 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 b" "a c d"; /* Global values */ grid-template-areas: inherit; grid-template-areas: initial; grid-template-areas: unset;
Werte
none
- Der grid container definiert keine benannten grid areas.
<string>
+- Für jeden seperaten String wird eine Reihe, und für jede Zelle in dem String wird eine Spalte erstellt. Mehrere benannte Zelltokens innerhalb und zwischen den Reihen sind eine einzelne benannte grid area welche die entsprechenden grid Zellen überspannt. Wenn diese Zellen kein Quader formen ist de Deklaration ungültig.
Formaler Syntax
none | <string>+
Beispiel
HTML
<section id="page"> <header>Header</header> <nav>Navigation</nav> <main>Main area</main> <footer>Footer</footer> </section>
CSS
#page { display: grid; width: 100%; height: 250px; grid-template-areas: "head head" "nav main" "nav 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; }
Ergebnis
Spezifikationen
Specification | Status | Comment |
---|---|---|
CSS Grid Layout Die Definition von 'grid-template-areas' in dieser Spezifikation. |
Anwärter Empfehlung | Ursprüngliche Definition |
Initialwert | none |
---|---|
Anwendbar auf | Gridcontainer |
Vererbt | Nein |
Medien | visuell |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Kanonische Reihenfolge | die eindeutige Reihenfolge definiert durch die formale Grammatik |
Browser kompatibilität
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Grundlegende Unterstützung | 57 291 | 16 | 52 402 | Nein | 44 283 | 10.1 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Grundlegende Unterstützung | 57 | 57 291 | 16 | 52 402 | 44 | 10.3 | 6.0 |
1. From version 29: this feature is behind the Enable experimental Web Platform features
preference. To change preferences in Chrome, visit chrome://flags.
2. From version 40: this feature is behind the layout.css.grid.enabled
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
3. From version 28: this feature is behind the Enable experimental Web Platform features
preference.
Siehe auch
- Verwandte CSS Eigenschaften:
grid-template-rows
,grid-template-columns
,grid-template
- Grid Layout Guide: Grid template areas
- Video Tutorial: Grid Template Areas