Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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.
La propriétégrid-template est unepropriété raccourcie permettant de définir les colonnes, grilles et zones d'une 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>One</div> <div>Two</div> <div>Three</div> </div> </div></section>#example-element { border: 1px solid #c5c5c5; display: grid; grid-gap: 10px; width: 200px;}#example-element :nth-child(1) { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue; grid-area: a;}#example-element :nth-child(2) { background-color: rgba(255, 0, 200, 0.2); border: 3px solid rebeccapurple; grid-area: b;}#example-element :nth-child(3) { background-color: rgba(94, 255, 0, 0.2); border: 3px solid green; grid-area: c;}Les propriétés détaillées sontgrid-template-rows,grid-template-columns etgrid-template-areas.
Syntaxe
/* 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: [linename] 100px / [columnname1] 30% [columnname2] 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: unset;Valeurs
noneUn mot-clé qui applique
nonesur les trois propriétés détaillées et qui indique 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 et leurs tailles seront déterminées par les propriétésgrid-auto-rowsetgrid-auto-columns.<'grid-template-rows'> / <'grid-template-columns'>Voir
grid-template-rowsetgrid-template-columnspour les valeurs définies.grid-template-areasrecevra la valeurnone.[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <track-list> ]?grid-template-areasest définie avec les chaînes listées,grid-template-rowsest définie avec les tailles de piste suivant chaque chaîne (autosera utilisé pour les tailles manquantes), les lignes seront découpées selon les noms avant et après chaque taille.grid-template-columnssera définie avec la valeur listée après la barre oblique (ounonesinon).Note :La fonction
repeat()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 :
|
|---|---|
| Applicabilité | conteneurs de grille |
| Héritée | non |
| Pourcentages | pour chaque propriété individuelle de la propriété raccourcie :
|
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
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>?<fixed-size>]+<line-names>?)
<name-repeat> =
repeat([<integer [1,∞]>|auto-fill] ,<line-names>+)
<fixed-breadth> =
<length-percentage [0,∞]>
Exemples
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-column: foot;}HTML
<section> <header>En-tête</header> <nav>Navigation</nav> <main>Zone principale</main> <footer>Bas de page</footer></section>Résultat
Spécifications
| Specification |
|---|
| CSS Grid Layout Module Level 2 # explicit-grid-shorthand |