grid

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é raccourcie CSS grid permet de définir toutes les propriétés de grille explicites et implicites en une seule déclaration.

En utilisant grid, vous définissez un axe avec grid-template-rows ou grid-template-columns, puis vous définissez comment le contenu doit se répéter automatiquement sur l'autre axe avec les propriétés de grille implicites : grid-auto-rows, grid-auto-columns, et grid-auto-flow.

Exemple interactif

grid: auto-flow / 1fr 1fr 1fr;

grid: auto-flow dense / 40px 40px 1fr;

grid: repeat(3, 80px) / auto-flow;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <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;
}

#example-element :nth-child(2) {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
  grid-column: auto / span 3;
  grid-row: auto / span 2;
}

#example-element :nth-child(3) {
  background-color: rgb(94 255 0 / 0.2);
  border: 3px solid green;
  grid-column: auto / span 2;
}

Note : Les sous-propriétés que vous ne définissez pas prennent leur valeur initiale, comme pour toute propriété raccourcie. De plus, les propriétés de gouttière ne sont PAS réinitialisées par cette propriété raccourcie.

Syntaxe

css

/* Valeurs <'grid-template'> */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [line-name1] "a" 100px [line-name2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* <'grid-template-rows'> /
   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
   <'grid-template-columns'> values */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/* Valeurs globales */
grid: inherit;
grid: initial;
grid: revert;
grid: revert-layer;
grid: unset;

Valeurs

<'grid-template'>

Définit grid-template, ce qui inclut grid-template-columns, grid-template-rows et grid-template-areas.

<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?

Configure un flux automatique en définissant explicitement les pistes de lignes avec la propriété grid-template-rows (et la propriété grid-template-columns à none) et en définissant comment répéter automatiquement les pistes de colonnes avec grid-auto-columns (et grid-auto-rows à auto). grid-auto-flow est également définie sur column, avec dense si elle est incluse.

Toutes les autres sous-propriétés de grid sont réinitialisées à leur valeur initiale.

[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

Configure un flux automatique en définissant explicitement les pistes de colonnes avec la propriété grid-template-columns (et la propriété grid-template-rows à none) et en définissant comment répéter automatiquement les pistes de lignes avec grid-auto-rows (et grid-auto-columns à auto). grid-auto-flow est également définie sur row, avec dense si elle est incluse.

Toutes les autres sous-propriétés de grid sont réinitialisées à leur valeur initiale.

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `grid-template-rows`: `none` `grid-template-columns`: `none` `grid-template-areas`: `none` `grid-auto-rows`: `auto` `grid-auto-columns`: `auto` `grid-auto-flow`: `row` `grid-column-gap`: `0` `grid-row-gap`: `0` `column-gap`: `normal` `row-gap`: `normal`
Applicabilité	conteneurs de grille
Héritée	non
Pourcentages	pour chaque propriété individuelle de la propriété raccourcie : `grid-template-rows`: fait référence à la dimension correspondante de la zone de contenu `grid-template-columns`: fait référence à la dimension correspondante de la zone de contenu `grid-auto-rows`: fait référence à la dimension correspondante de la zone de contenu `grid-auto-columns`: 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-rows`: comme spécifié, mais avec les longueurs relatives converties en longueurs absolues `grid-template-columns`: comme spécifié, mais avec les longueurs relatives converties en longueurs absolues `grid-template-areas`: comme spécifié `grid-auto-rows`: le pourcentage tel que spécifié ou une longueur absolue `grid-auto-columns`: le pourcentage tel que spécifié ou une longueur absolue `grid-auto-flow`: comme spécifié `grid-column-gap`: le pourcentage tel que spécifié ou une longueur absolue `grid-row-gap`: le pourcentage tel que spécifié ou une longueur absolue `column-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements `row-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Type d'animation	pour chaque propriété individuelle de la propriété raccourcie : `grid-template-rows`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list `grid-template-columns`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list `grid-template-areas`: discrète `grid-auto-rows`: by computed value type `grid-auto-columns`: by computed value type `grid-auto-flow`: discrète `grid-column-gap`: une longueur `grid-row-gap`: une longueur `column-gap`: une longueur, pourcentage ou calc() ; `row-gap`: une longueur, pourcentage ou calc() ;

Syntaxe formelle

grid = 
  <'grid-template'>                                   |
  <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?  |
  [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>  

<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-auto-columns> = 
  <track-size>+  

<grid-auto-rows> = 
  <track-size>+  

<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

Créer une mise en page en grille

HTML

html

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

css

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

Résultat

Spécifications

Specification
CSS Grid Layout Module Level 2 # grid-shorthand

Compatibilité des navigateurs

Voir aussi

La propriété raccourcie grid-template
La propriété grid-template-rows
La propriété grid-template-columns
La propriété grid-template-areas
La propriété grid-auto-columns
La propriété grid-auto-rows
La propriété grid-auto-flow
Placer les éléments d'une grille sur les lignes
Les zones de grilles et les propriétés raccourcies

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 6 févr. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content