Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

grid

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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.

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 :
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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

Spécification État Commentaires
CSS Grid Layout
La définition de 'grid' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Support simple 29.0[1] 40.0 (40.0)[2] Pas de support[3] Pas de support 28.0[1] Nightly build-webkit
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support Pas de support Pas de support[3] Pas de support Pas de support

[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

Étiquettes et contributeurs liés au document

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