grid
====

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
La propriété **`grid`** est une propriété raccourcie qui permet de définir toutes les propriétés liées aux grilles CSS, qu'elles soient explicites (`grid-template-rows`, `grid-template-columns` et `grid-template-areas`), implicites (`grid-auto-rows`, `grid-auto-columns` et `grid-auto-flow`).

Exemple interactif
------------------

**Note :** Une seule déclaration `grid` permettra uniquement de définir les propriétés explicites ou implicites. Les propriétés qui ne sont pas définies via la propriété raccourcie prendront leurs valeurs initiales. Les propriétés d'espacement ne sont pas surchargées par cette propriété raccourcie.

Syntaxe
-------


```css
/\* Valeurs <'grid-template'> \*/
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
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: unset;
```

### Valeurs

Pour plus de détails, voir les pages de chacune des propriétés : `grid-template`, `grid-auto-flow`, `grid-auto-rows`, `grid-auto-columns`.

`<'grid-template'>`

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

`<'grid-auto-flow'>`

Définit `grid-auto-flow` qui indique le fonctionnement de l'algorithme de placement automatique et qui détaille exactement comment les éléments placés automatiquement « coulent » dans la grille.

`<'grid-auto-rows'>`

Définit `grid-auto-rows` qui indique la taille des pistes créées pour les lignes de façon implicite.

`<'grid-auto-columns'>`

Définit `grid-auto-columns` qui indique la taille des pistes créées pour les colonnes de façon implicite.

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'>    
  
```

Exemples
--------

### CSS


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

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

### HTML


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

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-shorthand |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

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