grid-template

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis octobre 2017.

Lapropriété raccourcie CSSgrid-template définit lescolonnes de grille, leslignes de grille et leszones de grille.

Exemple interactif

grid-template:  "a a a" 40px  "b c c" 40px  "b c c" 40px / 1fr 1fr 1fr;

grid-template:  "b b a" auto  "b b c" 2ch  "b b c" 1em / 20% 20px 1fr;

grid-template:  "a a ." minmax(50px, auto)  "a a ." 80px  "b b c" auto / 2em 3em auto;

<section>  <div>    <div>      <div>Un</div>      <div>Deux</div>      <div>Trois</div>    </div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  display: grid;  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;}

Propriétés constitutives

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

Syntaxe

css

/* Valeur avec un mot-clé */grid-template: none;/* Valeurs utilisant grid-template-rows / grid-template-columns */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%);/* Valeurs utilisant grid-template-areas grid-template-rows / grid-template-column */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;/* Valeurs globales */grid-template: inherit;grid-template: initial;grid-template: revert;grid-template: revert-layer;grid-template: unset;

Valeurs

none: Définit les trois propriétés détaillées surnone, ce qui signifie qu'il n'y a pas de grille explicite. Il n'y a pas de zone de grille nommée. Les lignes et les colonnes seront générées de façon implicite ; leur taille sera déterminée par les propriétésgrid-auto-rows etgrid-auto-columns. Il s'agit de la valeur par défaut.
<'grid-template-rows'> / <'grid-template-columns'>: Voirgrid-template-rows etgrid-template-columns pour les valeurs définies.grid-template-areas recevra la valeurnone.
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <track-list> ]?: grid-template-areas est définie avec les chaînes listées,grid-template-rows est définie avec les tailles de piste suivant chaque chaîne (auto sera utilisé pour les tailles manquantes), les lignes seront découpées selon les noms avant et après chaque taille.grid-template-columns sera définie avec la valeur listée après la barre oblique (ounone sinon).
Note :La fonctionrepeat() n'est pas autorisée parmi les listes de pistes car les pistes sont conçues pour correspondre à la disposition finale (à la façon d'un dessin en ASCII).

Note :La propriété raccourciegrid accepte la même syntaxe mais réinitialise également les propriétés implicites avec leurs valeurs initiales. On pourra utilisergrid (plutôt quegrid-template) pour empêcher les valeurs de suivre la cascade de façon séparée.

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `grid-template-columns`:`none` `grid-template-rows`:`none` `grid-template-areas`:`none`
Applicabilité	conteneurs de grille
Héritée	non
Pourcentages	pour chaque propriété individuelle de la propriété raccourcie : `grid-template-columns`: fait référence à la dimension correspondante de la zone de contenu `grid-template-rows`: fait référence à la dimension correspondante de la zone de contenu
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `grid-template-columns`: comme défini, mais avec les longueurs relatives converties en longueurs absolues `grid-template-rows`: comme défini, mais avec les longueurs relatives converties en longueurs absolues `grid-template-areas`: comme défini
Type d'animation	pour chaque propriété individuelle de la propriété raccourcie : `grid-template-columns`: liste simple de longueur, pourcentage ou calc, à condition que les seules différences soient dans les valeurs des composants de longueur, pourcentage ou calc dans la liste `grid-template-rows`: liste simple de longueur, pourcentage ou calc, à condition que les seules différences soient dans les valeurs des composants de longueur, pourcentage ou calc dans la liste `grid-template-areas`: discrète

Syntaxe formelle

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>?<track-size>]+<line-names>?)

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

<integer> =
<number-token>

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

Exemples

Définir un modèle de grille

HTML

html

<section>  <header>En-tête</header>  <nav>Navigation</nav>  <main>Zone principale</main>  <footer>Bas de page</footer></section>

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;}