CSS/Eigenschaften/grid-template

Browserunterstützung
caniuse.com

Die Eigenschaft grid-template ist die Zusammenfassung der Eigenschaften grid-template-areas, grid-template-rows, und grid-template-columns.

Syntax 1:

 grid-template: <row-template> / <column-template>

In dieser Syntax werden einfach die Werte für grid-template-rows und grid-template-columns eingesetzt.

Syntax 2:

 grid-template: <row-area-definitionen> / <column-template>

Die row-area-Defitionen bestehen aus einer oder mehreren Definitionen für explizite Grid-Zeilen, die durch Whitespace voneinander zu trennen sind. Idealerweise schreibt man jede Zeilendefinition auf eine eigene Zeile!

Eine row-area-Definition setzt sich zusammen aus einer Namensgruppe, einem String mit Bereichsnamen wie bei grid-template-areas, einer Höhenangabe und einer weiteren Namensgruppe. Der String mit Bereichsnamen ist Pflicht, der Rest ist optional. Eine Namensgruppe ist eine in eckigen Klammern stehende Liste von Namen für Rasterlinien. Die Namensgruppe vor dem Bereichsnamen-String wird auf die Rasterlinie über dieser Grid-Zeile angewendet und die Namensgruppe dahinter wird auf die Rasterlinie unter der Grid-Zeile angewendet.

Das Column-Template in der Syntax 2 entspricht grid-template-columns, es darf aber kein repeat() verwendet werden.

Erlaubte Werte

• siehe Einzeleigenschaften

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

Defaults der Einzelwerte

• grid-template-areas: none
• grid-template-rows: none
• grid-template-columns: none

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

body{
  display: grid;
  grid-template: "head head"  min-content
                 "nav  nav"   auto
                 "main main"  1fr
                 "news aside" 5em
                 "foot foot"  min-content
                 / 1fr 1fr;
}

@media (min-width: 30em) { 
  body{
    grid-template: "head head head"  min-content
                   "nav  news aside" 5em
                   "main main main"  1fr
                   "foot foot foot"  min-content
                   / 1fr 1fr 1fr;
 }
}

In schmalen Viewports werden die Kindelemente des body in zwei Spalten angeordnet. Bei einem größen Viewport wird auf ein 3-Spalten-Layout mit geänderter Anordnung umgeschaltet.

Siehe auch

• Grid Layout
  • Benannte Linien und Rasterbereiche

Weblinks

• Spezifikation (CSSWG): grid-template
• Details: caniuse.com