La propriété grid-template
est une propriété raccourcie permettant de définir les colonnes, grilles et zones d'une grille.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Les propriétés détaillées sont grid-template-rows
, grid-template-columns
et grid-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
none
- Un mot-clé qui applique
none
sur 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-rows
etgrid-auto-columns
. <'grid-template-rows'> / <'grid-template-columns'>
- Voir
grid-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 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é raccourcie grid
accepte la même syntaxe mais réinitialise également les propriétés implicites avec leurs valeurs initiales. On pourra utiliser grid
(plutôt que grid-template
) pour empêcher les valeurs de suivre la cascade de façon séparée.
Syntaxe formelle
none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?où
<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?où
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autooù
<length-percentage> = <length> | <percentage>
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 id="page">
<header>En-tête</header>
<nav>Navigation</nav>
<main>Zone principale</main>
<footer>Bas de page</footer>
</section>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Grid Layout La définition de 'grid-template' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
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 | discrète |
Compatibilité des navigateurs
BCD tables only load in the browser