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.

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

Initialwertnone
Anwendbar aufGridcontainer
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Browser kompatibilität

 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 57
Vollständige Unterstützung 57
Vollständige Unterstützung 29
Deaktiviert
Deaktiviert From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Vollständige Unterstützung 16Firefox Vollständige Unterstützung 52
Vollständige Unterstützung 52
Vollständige Unterstützung 40
Deaktiviert
Deaktiviert 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.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 44
Vollständige Unterstützung 44
Vollständige Unterstützung 28
Deaktiviert
Deaktiviert From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Vollständige Unterstützung 10.1WebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 57
Vollständige Unterstützung 57
Vollständige Unterstützung 29
Deaktiviert
Deaktiviert From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile Vollständige Unterstützung 16Firefox Android Vollständige Unterstützung 52
Vollständige Unterstützung 52
Vollständige Unterstützung 40
Deaktiviert
Deaktiviert 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.
Opera Android Vollständige Unterstützung 44Safari iOS Vollständige Unterstützung 10.3Samsung Internet Android Vollständige Unterstützung 6.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.

 

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: hutattedonmyarm
Zuletzt aktualisiert von: hutattedonmyarm,