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

Si la valeur <'grid-auto-columns'> est absente, on prendra la valeur définie pour <'grid-auto-rows'>. Les autres valeurs par défaut seront prises sur les valeurs initiales.

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.

Syntaxe

/* <'grid-template'> */
grid: none;
grid: subgrid;
grid: 100px 1fr;
grid: [linename1] 100px [linename2 linename3];
grid: 200px repeat(auto-fill, 100px) 300px;
grid: minmax(100px, max-content) repeat(auto-fill, 200px) 20%;
grid: grid-template: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

/* <'grid-auto-flow'> */
grid: row;
grid: column;
grid: dense;
grid: row dense;
grid: column dense;

/* <'grid-auto-flow'> + <'grid-auto-rows'> /
   <'grid-auto-columns'> */
grid: row 200px;
grid: column 80vmax;
grid: row dense 30em;
grid: column dense min-content;
grid: dense minmax(300px, max-content);
grid: row 400px / 40%;
grid: column auto / minmax(mix-content, 1fr);

/* 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-auto-flow'> [ <'grid-auto-rows'> [ / <'grid-auto-columns'> ]? ]? ]

Exemples

FIXME:

Spécifications

Compatibilité des navigateurs

[1] Cette fonctionnalité est implémentée via le marqueur fonctionnalités expérimentales de la Web Platform sous chrome://flags.

[2] Cette fonctionnalité est implémentée via la préférence layout.css.grid.enabled qui vaut false par défaut.

[3] Internet Explorer implémente une ancienne version de la spécification qui ne définit pas cette propriété.

Voir aussi

• grid-template
• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow