Propriété raccourci CSS grid — Guide complet

La propriété CSS grid est un raccourci qui vous permet de définir une mise en page CSS Grid complète en une seule déclaration. Elle définit simultanément les six sous-propriétés suivantes sur le conteneur de grille :

grid-template-rows — hauteurs des rangées explicites
grid-template-columns — largeurs des colonnes explicites
grid-template-areas — régions nommées de la mise en page
grid-auto-rows — hauteur des rangées créées implicitement
grid-auto-columns — largeur des colonnes créées implicitement
grid-auto-flow — direction dans laquelle les éléments placés automatiquement sont ajoutés

La propriété grid s'applique uniquement à un conteneur de grille — un élément avec display: grid ou display: inline-grid.

Important : toute sous-propriété que vous ne mentionnez pas dans une déclaration grid est réinitialisée à sa valeur initiale. C'est la différence essentielle par rapport à la définition individuelle des sous-propriétés — grid repart toujours d'une ardoise vierge.

Pistes explicites et implicites

Comprendre cette distinction est la clé pour interpréter n'importe quelle valeur grid :

Les pistes explicites sont les rangées et les colonnes que vous définissez manuellement. Le / dans la valeur sépare les rangées (à gauche) des colonnes (à droite) : grid: 100px 200px / 1fr 1fr signifie deux rangées explicites et deux colonnes explicites.
Les pistes implicites sont les rangées ou colonnes supplémentaires que le navigateur crée automatiquement lorsqu'il y a plus d'éléments que la grille explicite ne peut en contenir. grid-auto-rows / grid-auto-columns définissent leurs tailles, et grid-auto-flow détermine si le débordement se fait dans de nouvelles rangées (par défaut) ou de nouvelles colonnes.

Vous pouvez spécifier soit les propriétés explicites soit les propriétés implicites dans un seul raccourci grid — pas les deux en même temps.

L'unité `fr`

Les mises en page Grid utilisent fréquemment fr (unité de fraction). 1fr signifie « une part de l'espace disponible ». Trois colonnes définies comme 1fr 1fr 1fr obtiennent chacune un tiers de la largeur du conteneur. Vous pouvez également mélanger fr avec des tailles fixes : 200px 1fr donne à la première colonne 200 px et à la deuxième colonne tout l'espace restant.

Syntaxe

/* Keyword */
grid: none;

/* Explicit rows / columns */
grid: <grid-template-rows> / <grid-template-columns>;

/* Template areas */
grid: <grid-template>;

/* Implicit rows, explicit columns */
grid: [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>;

/* Explicit rows, implicit columns */
grid: <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?;

/* Global values */
grid: inherit;
grid: initial;
grid: unset;

La notation && signifie que les deux mots-clés doivent apparaître ; leur ordre n'a pas d'importance. Le ? signifie que le terme est facultatif.

Valeur initiale	`none`
S'applique à	Conteneurs de grille
Hérité	Non
Animable	Oui (la mise en page Grid est animable)
Version CSS	CSS Grid Layout Module Level 1
Syntaxe DOM	`element.style.grid = "100px / 1fr 1fr"`

Formes de valeurs

Valeur	Ce qu'elle fait
`none`	Supprime tout gabarit explicite ; toutes les sous-propriétés sont réinitialisées à leur valeur initiale.
`<template-rows> / <template-columns>`	Définit les pistes de rangées et de colonnes explicites.
`<grid-template>`	Raccourci pour `grid-template-rows`, `grid-template-columns` et `grid-template-areas`.
`<template-rows> / auto-flow [dense] [<auto-cols>]`	Rangées explicites ; les colonnes sont générées automatiquement. Ajoutez `dense` pour combler les espaces vides.
`auto-flow [dense] [<auto-rows>] / <template-cols>`	Les rangées sont générées automatiquement ; les colonnes sont explicites.
`initial`	Réinitialise la propriété à sa valeur par défaut (`none`).
`inherit`	Hérite de la valeur calculée de l'élément parent.

Exemples

Exemple 1 : Grille explicite de base

grid: 100px / auto auto auto crée une rangée explicite (100 px de hauteur) et trois colonnes auto de largeur égale. Les neuf boîtes débordent dans des rangées implicites supplémentaires (dimensionnées automatiquement) :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-box {
        background-color: #eee;
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 30px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box">1</div>
      <div class="grid-box">2</div>
      <div class="grid-box">3</div>
      <div class="grid-box">4</div>
      <div class="grid-box">5</div>
      <div class="grid-box">6</div>
      <div class="grid-box">7</div>
      <div class="grid-box">8</div>
      <div class="grid-box">9</div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple 2 : Auto-flow vers les colonnes

grid: auto auto / auto-flow définit deux rangées explicites et indique au navigateur de générer des colonnes automatiquement lors du placement des éléments. Chaque élément est placé dans une nouvelle colonne jusqu'à ce que tous les éléments soient placés, remplissant les deux rangées colonne par colonne.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: auto auto / auto-flow;
        gap: 5px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple 3 : Placement explicite d'éléments avec `grid-area`

Chaque boîte est positionnée avec grid-area en utilisant la syntaxe row-start / column-start / row-end / column-end sur un gabarit grid: 100px / auto auto auto :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .grid-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .grid-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .grid-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .grid-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .grid-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        gap: 10px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
      <div class="grid-box5">5</div>
      <div class="grid-box6">6</div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple 4 : Unités `fr` pour des colonnes flexibles

L'utilisation des unités fr est le schéma le plus courant pour les grilles responsives. Les trois colonnes ci-dessous prennent chacune une part égale de la largeur disponible et s'élargissent ou se rétrécissent ensemble :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: auto / 1fr 1fr 1fr;
        gap: 10px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.9);
        text-align: center;
        padding: 20px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Three equal columns with fr units</h2>
    <div class="grid-container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
    </div>
  </body>
</html>

La règle grid: auto / 1fr 1fr 1fr est équivalente à la formulation plus verbeuse :

grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
/* all other grid sub-properties reset to initial */

Exemple 5 : Zones de gabarit nommées

Le raccourci grid prend en charge directement la syntaxe grid-template-areas. Chaque chaîne entre guillemets représente une rangée ; chaque mot à l'intérieur est un nom de zone. Un . (point) marque une cellule vide.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .layout {
        display: grid;
        grid:
          "header header header" 60px
          "sidebar main   main"  1fr
          "footer footer footer" 40px
          / 160px 1fr 1fr;
        gap: 8px;
        height: 260px;
        background-color: #ccc;
        padding: 8px;
      }
      .header  { grid-area: header;  background: #1c87c9; color: #fff; display: flex; align-items: center; justify-content: center; }
      .sidebar { grid-area: sidebar; background: #8ecae6; display: flex; align-items: center; justify-content: center; }
      .main    { grid-area: main;    background: #eee;    display: flex; align-items: center; justify-content: center; }
      .footer  { grid-area: footer;  background: #023e8a; color: #fff; display: flex; align-items: center; justify-content: center; }
    </style>
  </head>
  <body>
    <div class="layout">
      <div class="header">Header</div>
      <div class="sidebar">Sidebar</div>
      <div class="main">Main content</div>
      <div class="footer">Footer</div>
    </div>
  </body>
</html>

La valeur après chaque chaîne de rangée entre guillemets (60px, 1fr, 40px) est la hauteur de la rangée. Le / à la fin commence la liste des largeurs de colonnes (160px 1fr 1fr).

Quand utiliser `grid` plutôt que `grid-template`

Objectif	Utiliser
Définir uniquement les tailles de rangées/colonnes explicites et les zones nommées	`grid-template`
Contrôler également la direction du placement automatique ou les tailles de pistes implicites	`grid`
Définir uniquement les largeurs de colonnes	`grid-template-columns`
Définir uniquement les hauteurs de rangées	`grid-template-rows`

Choisir le raccourci le plus étroit rend votre code plus facile à parcourir et évite de réinitialiser accidentellement des sous-propriétés sans rapport.

Compatibilité des navigateurs

Le raccourci grid est pris en charge dans tous les navigateurs modernes (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+). Pour les environnements plus anciens, vous devrez peut-être définir les sous-propriétés individuellement. Consultez les données de compatibilité actuelles sur Can I use: CSS Grid Layout.

Voir aussi

grid-template — raccourci pour les seules sous-propriétés de gabarit
grid-template-columns et grid-template-rows — dimensionnement des pistes explicites
grid-template-areas — nommage des régions de mise en page
grid-auto-flow — contrôle de la façon dont les éléments placés automatiquement remplissent la grille
grid-auto-rows et grid-auto-columns — dimensionnement des pistes implicites
grid-gap — espacement entre les rangées et les colonnes
grid-area — placer un élément par zone nommée ou numéros de ligne
display — la valeur grid qui transforme un élément en conteneur de grille
align-items et justify-content — alignement au sein de la grille

Pratique

Lesquelles des affirmations suivantes sur la propriété raccourci CSS grid sont correctes ?

C'est un raccourci qui réinitialise les six sous-propriétés de grille à la fois, y compris les propriétés de gabarit et de placement automatique.Les sous-propriétés omises d'une déclaration grid sont réinitialisées à leurs valeurs initiales.L'unité fr divise l'espace disponible en parts fractionnaires égales entre les colonnes ou les rangées.Le raccourci grid peut définir à la fois les pistes de gabarit explicites et les propriétés auto-flow en même temps dans une seule déclaration.grid: auto / 1fr 1fr crée deux colonnes de largeur égale avec une rangée dimensionnée automatiquement.

Pistes explicites et implicites

L'unité fr

Syntaxe

Formes de valeurs

Exemples

Exemple 1 : Grille explicite de base

Exemple 2 : Auto-flow vers les colonnes

Exemple 3 : Placement explicite d'éléments avec grid-area

Exemple 4 : Unités fr pour des colonnes flexibles

Exemple 5 : Zones de gabarit nommées

Quand utiliser grid plutôt que grid-template

Compatibilité des navigateurs

Voir aussi

Pratique

L'unité `fr`

Exemple 3 : Placement explicite d'éléments avec `grid-area`

Exemple 4 : Unités `fr` pour des colonnes flexibles

Quand utiliser `grid` plutôt que `grid-template`