grid-template

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Die grid-template CSS Eigenschaft ist eine Kurzschreibweise zur Definition von Rasterspalten, Rasterreihen und Rasterbereichen.

Probieren Sie es aus

Zusätzliche Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

Syntax

css
/* Keyword value */
grid-template: none;

/* grid-template-rows / grid-template-columns values */
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [line-name] 100px / [column-name1] 30% [column-name2] 70%;
grid-template: fit-content(100px) / fit-content(40%);

/* grid-template-areas grid-template-rows / grid-template-column values */
grid-template:
  "a a a"
  "b b b";
grid-template:
  "a a a" 20%
  "b b b" auto;
grid-template:
  [header-top] "a a a" [header-bottom]
  [main-top] "b b b" 1fr [main-bottom]
  / auto 1fr auto;

/* Global values */
grid-template: inherit;
grid-template: initial;
grid-template: revert;
grid-template: revert-layer;
grid-template: unset;

Werte

none

Ist ein Schlüsselwort, das alle drei ausführlichen Eigenschaften auf none setzt, was bedeutet, dass kein explizites Raster vorhanden ist. Es gibt keine benannten Rasterbereiche. Reihen und Spalten werden implizit generiert; ihre Größe wird durch die Eigenschaften grid-auto-rows und grid-auto-columns bestimmt.

<'grid-template-rows'> / <'grid-template-columns'>

Setzt grid-template-rows und grid-template-columns auf die angegebenen Werte und setzt grid-template-areas auf none.

[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

Setzt grid-template-areas auf die aufgelisteten Zeichenfolgen, grid-template-rows auf die Spurgrößen, die auf jede Zeichenfolge folgen (eine fehlende Größe wird durch auto ergänzt), und fügt die benannten Linien vor/nach jeder Größe ein, und grid-template-columns auf die nach dem Schrägstrich angegebene Spurauflistung (oder none, wenn nicht angegeben).

Hinweis: Die repeat() Funktion ist in diesen Spurauflistungen nicht erlaubt, da die Spuren dazu gedacht sind, visuell eins zu eins mit den Reihen/Spalten in der "ASCII-Kunst" auszurichten.

Hinweis: Die grid Kurzschreibweise akzeptiert die gleiche Syntax, setzt jedoch auch die impliziten Rasteigenschaften auf ihre Anfangswerte zurück. Verwenden Sie grid (anstatt grid-template), um zu verhindern, dass diese Werte separat kaskadieren.

Formale Definition

Initialer Wertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufGridcontainer
VererbtNein
Prozentwertewie die jeweiligen Kurzschreibweisen:
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:
  • grid-template-columns: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
  • grid-template-rows: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
  • grid-template-areas: diskret

Formale Syntax

grid-template = 
  none                                                |
  [ <'grid-template-rows'> / <'grid-template-columns'> ]  |
  [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?  

<grid-template-rows> = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<grid-template-columns> = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<explicit-track-list> = 
  [ <line-names>? <track-size> ]+ <line-names>?  

<track-list> = 
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?  

<auto-track-list> = 
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?  

<line-name-list> = 
  [ <line-names> | <name-repeat> ]+  

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<fixed-breadth> = 
  <length-percentage [0,∞]>

Beispiele

Definition einer Rastervorlage

CSS

css
#page {
  display: grid;
  width: 100%;
  height: 200px;
  grid-template:
    [header-left] "head head" 30px [header-right]
    [main-left] "nav  main" 1fr [main-right]
    [footer-left] "nav  foot" 30px [footer-right]
    / 120px 1fr;
}

header {
  background-color: lime;
  grid-area: head;
}

nav {
  background-color: lightblue;
  grid-area: nav;
}

main {
  background-color: yellow;
  grid-area: main;
}

footer {
  background-color: red;
  grid-area: foot;
}

HTML

html
<div id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</div>

Ergebnis

Spezifikationen

Specification
CSS Grid Layout Module Level 2
# explicit-grid-shorthand

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch