MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

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), ou qu'elles concernent les espacements (grid-column-gap and grid-row-gap).

/* 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;

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 sont surchargées par cette propriété raccourcie.

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitéconteneurs de grille
Héritéenon
Pourcentagespour 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
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

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.

Syntaxe formelle

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

Exemples

CSS

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

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

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

Spécification État Commentaires
CSS Grid Layout
La définition de 'grid' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Support simple 57.0[1] 52.0 (52.0)[2] Pas de support[3] Pas de support[3] 44[4] 10.1
Fonctionnalité Webview Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 57.0[1] 57.0[1] 52.0 (52.0)[2] Pas de support[3] 44 10.3

[1] Cette fonctionnalité est implémentée depuis Chrome 29.0 via le marqueur fonctionnalités expérimentales de la Web Platform sous chrome://flags, activée par défaut pour Chrome 57.0.

[2] Cette fonctionnalité est implémentée via la préférence layout.css.grid.enabled depuis Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37) qui valait false par défaut et qui a été activée par défaut sur Gecko 52.0.

[3] Internet Explorer et Edge implémentent une ancienne version de la spécification qui ne définit pas cette propriété raccourcie. Une demande de mise à jour a été déposée.

[4] Cette fonctionnalité est Implémentée depuis Opera 28.0 via la préférence Activer les fonctionnalités expérimentales de la plateforme Web sous chrome://flags.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,