grid

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

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi