Propriété CSS grid-template

La propriété CSS grid-template définit les lignes, les colonnes et les zones nommées d'une grille CSS en une seule déclaration. C'est un raccourci pour trois propriétés longues :

grid-template-rows — la hauteur de chaque piste de ligne.
grid-template-columns — la largeur de chaque piste de colonne.
grid-template-areas — les régions nommées dans lesquelles vous pouvez placer des éléments avec grid-area.

Cette page explique la syntaxe, comment la barre oblique sépare les lignes des colonnes, comment fonctionne la forme avec zones nommées, quand utiliser grid-template plutôt que le raccourci plus large grid, et présente des exemples modifiables en direct.

Fonctionnement du raccourci

grid-template s'applique uniquement à un conteneur de grille — un élément avec display: grid (ou inline-grid). La propriété se présente sous deux formes principales.

Forme lignes / colonnes

Indiquez d'abord les tailles des lignes, puis une barre oblique (/), puis les tailles des colonnes :

.container {
  display: grid;
  grid-template: 100px 200px / 1fr 1fr 1fr; /* two rows / three columns */
}

La barre / est obligatoire lorsque vous spécifiez à la fois des lignes et des colonnes — elle indique au navigateur où commence la liste des colonnes. Les tailles peuvent utiliser n'importe quelle unité de dimensionnement de piste :

Unité	Signification
`px`, `%`, `em`	Tailles fixes ou relatives
`fr`	Une fraction de l'espace libre restant
`auto`	Dimensionné par le contenu, puis distribue l'espace restant
`min-content`	La plus petite taille évitant le débordement
`max-content`	La plus grande taille sans retour à la ligne
`minmax(min, max)`	Une plage — ex. `minmax(100px, 1fr)`
`repeat(n, size)`	Répète une piste `n` fois — ex. `repeat(3, 1fr)`

L'unité fr est propre à la mise en page en grille. 1fr 2fr signifie « une part et deux parts de l'espace libre » — ainsi la deuxième piste est deux fois plus large que la première.

Forme avec zones nommées

Chaque chaîne entre guillemets représente une ligne. Les mots à l'intérieur nomment les cellules de cette ligne. Les cellules qui partagent le même nom sur plusieurs lignes fusionnent en une seule zone rectangulaire. Un point (.) laisse une cellule sans nom :

.container {
  display: grid;
  grid-template:
    "header header" 60px
    "nav    main"   1fr
    / 120px 1fr;
}

La taille de la ligne (ex. 60px, 1fr) est écrite après la chaîne entre guillemets, avant la suivante. Les tailles de colonnes optionnelles viennent après le / final.

Vous placez ensuite les éléments dans les zones nommées avec grid-area :

header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }

C'est la façon la plus lisible de décrire une mise en page classique en CSS.

Info

grid-template ne définit pas l'espacement entre les pistes. Utilisez gap (ou la propriété longue column-gap) pour l'espacement entre les pistes. Les gouttières sont distinctes du dimensionnement des pistes.

grid-template vs. grid

Le raccourci plus large grid réinitialise également les propriétés de la grille implicite — grid-auto-rows, grid-auto-columns et grid-auto-flow — à leurs valeurs initiales. grid-template les laisse inchangées.

Quand utiliser chacun :

Utilisez grid-template lorsque vous souhaitez uniquement définir les pistes et zones explicites sans affecter le comportement de placement automatique.
Utilisez grid lorsque vous voulez réinitialiser en une seule fois toutes les propriétés de la grille.

Référence de la propriété

Caractéristique	Valeur
Valeur initiale	`none`
S'applique à	Conteneurs de grille
Héritée	Non
Animable	Oui — les tailles de pistes sont animables
Spécification	CSS Grid Layout Module Level 1

Syntaxe

grid-template: none
             | <grid-template-rows> / <grid-template-columns>
             | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
             | initial | inherit | unset;

Valeurs

Valeur	Description
`none`	Réinitialise les trois propriétés longues (`grid-template-rows`, `grid-template-columns`, `grid-template-areas`) à leurs valeurs initiales. Les éléments sont placés par l'algorithme de placement automatique.
`<rows> / <columns>`	Définit les pistes de lignes et de colonnes explicites. Toute unité de dimensionnement est valide : `px`, `%`, `fr`, `auto`, `minmax()`, `repeat()`, etc.
`"area-names" <size>`	Définit des zones nommées ligne par ligne. Chaque chaîne entre guillemets est une ligne ; la taille optionnelle qui la suit est la hauteur de cette ligne.
`initial`	Réinitialise la propriété à `none`.
`inherit`	Hérite de la valeur calculée de l'élément parent.
`unset`	Se comporte comme `inherit` si la propriété est héritable, sinon comme `initial`.

Exemples

Définir des lignes et des colonnes

Cette grille possède une ligne explicite de 170px et trois colonnes dimensionnées en auto. Les éléments au-delà de la première ligne s'écoulent dans des lignes créées implicitement.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template: 170px / auto auto auto;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Essayez vous-même »

Résultat :

Utilisation des zones nommées

Ici, le premier élément reçoit le nom item1 via grid-area. Les deux chaînes entre guillemets placent item1 dans un bloc 2×2 en haut à gauche. Les points (.) marquent les cellules vides dans lesquelles les autres éléments s'écoulent.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        grid-area: item1;
      }
      .grid-container {
        display: grid;
        grid-template: 'item1 item1 . .' 'item1 item1 . .';
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template property example</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Essayez vous-même »

Mise en page avec zones nommées

Une mise en page classique à trois sections — en-tête, barre latérale et contenu — définie en une seule déclaration grid-template :

<!DOCTYPE html>
<html>
  <head>
    <title>Named area layout</title>
    <style>
      .page {
        display: grid;
        grid-template:
          "header  header"  60px
          "sidebar content" 1fr
          "footer  footer"  40px
          / 160px 1fr;
        gap: 8px;
        height: 300px;
      }
      .page > * {
        background: #dde;
        padding: 8px;
        font-family: sans-serif;
      }
      .hdr  { grid-area: header; }
      .side { grid-area: sidebar; }
      .main { grid-area: content; }
      .ftr  { grid-area: footer; }
    </style>
  </head>
  <body>
    <div class="page">
      <div class="hdr">Header</div>
      <div class="side">Sidebar</div>
      <div class="main">Content</div>
      <div class="ftr">Footer</div>
    </div>
  </body>
</html>

La mise en page est entièrement définie en une seule propriété : trois lignes (60 px / flexible / 40 px) et deux colonnes (barre latérale de 160 px / contenu flexible). Aucune extension grid-column ou grid-row n'est nécessaire — les noms font le travail.

Pièges courants

Les zones doivent former un rectangle. Vous ne pouvez pas créer une zone nommée en forme de L ou de T. Si vous essayez, la déclaration est invalide et le navigateur l'ignore.

Le nombre de lignes doit correspondre. Le nombre de cellules dans chaque chaîne entre guillemets doit être identique. "a b" suivi de "a b c" est invalide.

grid-template réinitialise les trois propriétés longues. Définir grid-template: 1fr / 1fr définit implicitement grid-template-areas: none — toutes les zones nommées précédemment définies sont effacées.

Les pistes implicites ne sont pas affectées. grid-template contrôle uniquement la grille explicite. Les éléments supplémentaires qui débordent des lignes et colonnes définies sont placés dans des pistes implicites, dimensionnées par grid-auto-rows et grid-auto-columns.

Compatibilité des navigateurs

grid-template fait partie du CSS Grid Layout Module Level 1 et est pris en charge par tous les navigateurs modernes (Chrome 57+, Edge 16+, Firefox 52+, Safari 10.1+, Opera 44+). Elle n'a aucun effet sur les éléments qui ne sont pas des conteneurs de grille — associez-la toujours à display: grid.

Pratique

Que fait la propriété CSS grid-template ?

Elle vous permet de définir les lignes, les colonnes et les zones nommées d'un conteneur de grille en une seule déclaration.Elle sert à aligner le contenu à l'intérieur d'un élément de grille.C'est un raccourci pour grid-template-rows, grid-template-columns et grid-template-areas.Elle modifie la couleur d'arrière-plan d'un conteneur de grille.