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).

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

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

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.

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 :
  • 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écifé ou une longeur absolue
  • grid-auto-columns: le pourcentage tel que spécifé ou une longeur absolue
  • grid-auto-flow: comme spécifié
  • grid-column-gap: le pourcentage tel que spécifé ou une longeur absolue
  • grid-row-gap: le pourcentage tel que spécifé ou une longeur 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'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 57
Support complet 57
Support complet 29
Désactivée
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet 16Firefox Support complet 52
Support complet 52
Support complet 40
Désactivée
Désactivée From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 44
Support complet 44
Support complet 28
Désactivée
Désactivée From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Support complet 10.1WebView Android Support complet 57Chrome Android Support complet 57
Support complet 57
Support complet 29
Désactivée
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile Support complet 16Firefox Android Support complet 52
Support complet 52
Support complet 40
Désactivée
Désactivée From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 44Safari iOS Support complet 10.3Samsung Internet Android Support complet 6.0
Support complet 6.0
Support complet 6.0
Notes
Notes This was added early so is out of sync with the equivalent Chromium version.

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

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