`Grid-auto-flow` - Propriété CSS

grid-auto-flow

Résumé des caractéristiques de la propriété `grid-auto-flow`

Description rapide

Définit le mode de calcul automatique pour positionner les éléments dans la grille.

Statut

Standard

S'applique à

Conteneurs grille.

Utilisable sur

HTML

Valeurs prédéfinies

row | column | dense

Pourcentages

Ne s'appliquent pas.

Valeur initiale

row

Héritée par défaut

Non.

Type d'animation

Discrète : lors d'une animation, la propriété grid-auto-flow passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Mise en page par grille

Références (W3C)

🡇

🡅

CSS Grid Layout Module Level 3

Statut du document: WD (document de travail)

CSS Grid Layout Module Level 2

Statut du document: CR (document candidat à la recommandation)

CSS Grid Layout Module Level 1

Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de `grid-auto-flow`.

Schéma syntaxique de la propriété grid-auto-flow
Les liens du schéma donnent accès à plus de détails

Description de la propriété `grid-auto-flow`.

grid-auto-flow définit comment les éléments se positionnent dans la grille lorsque leur emplacement n'est pas explicitement définie par grid-row et grid-column.

Si les éléments se placent ligne par ligne, le nombre de colonnes de la grille doit être défini (voir grid-template-columns. A l'inverse, si les éléments se positionnent colonnes par colonnes, c'est le nombre de lignes qui doit être fixé (voir grid-template-rows).

Pour une présentation générale des possibilités des grilles, consultez la page sur la propriété grid.

Syntaxes pour `grid-auto-flow`.

grid-auto-flow: row;

Les éléments se placent les uns à la suite des autres en remplissant la grille ligne par ligne.
grid-auto-flow: column;

Les éléments se placent les uns à la suite des autres en remplissant la grille par colonnes.
grid-auto-flow: row dense; grid-auto-flow: dense;

Ces deux syntaxes sont synonymes.
Les éléments se placent lignes par lignes, en complétant les trous éventuels.

Des trous peuvent se former lorsque certains éléments s'étendent sur plusieurs cellules. Il se peut alors que la place restante sur la ligne ne permettent pas de les positionner à la suite des éléments précédents. Il se peut aussi que d'autres éléments soient figés à une certaine position (ligne et colonne définies) ; la place qu'ils laissent entre eux ne permet pas forcément de placer tous les éléments dans l'ordre.

Exemple 1 : formation de trous dans la grille à cause d'éléments étendus.

L'élément numéro 4 de la grille ci-dessous est étendu sur deux colonnes (span 2). Il ne peut donc pas se positionner dans la place restante sur la première ligne. Il est rejeté en deuxième ligne en laissant un trou à la fin de la première ligne.

La grille ci-dessous est la même mais avec la propriété grid-auto-flow:dense;. Le trou laissé par l'élément numéro 4 en bout de ligne est bouché par le premier élément capable d'y entrer (le numéro 5). L'ordre des éléments est donc altéré.

Exemple 2 : formation de trous dans la grille à cause d'éléments fixés.

Dans ce deuxième exemple, l'élément numéro 3 (en bleu) a été fixé en colonne 4 (grid-column:4). Si la grille n'est pas "dense", l'élément suivant se positionne après lui, laissant un trou sur la première ligne.

Si la grille est "dense", le quatrième élément se positionne avant le troisième pour ne pas laisser de trou. Là aussi l'ordre des éléments est altéré.
grid-auto-flow: column dense;

Les éléments se placent colonnes par colonnes, en complétant les trous éventuels. Voir les explications ci-dessus au sujet de la formation des trous.

Valeurs communes à toutes les propriétés :


grid-auto-flow: initial  (row)
grid-auto-flow: inherit
grid-auto-flow: revert
grid-auto-flow: revertLayer
grid-auto-flow: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Animation de la propriété `grid-auto-flow`.

grid-auto-flow est tout à fait le genre de propriété qui ne gagne pas grand chose à être animée. D'autant plus que, dans un cas plus complexe que notre petit exemple, l'animation peut nécessiter des calculs assez lourds.

Exemple interactif avec la propriété `grid-auto-flow`.

L'élément "Mars", en bleu, est étendu sur deux lignes et trois colonnes, ce qui l'empêche de se placer juste après février (il ne reste que deux colonnes alors qu'il en occupe trois). L'emplacement des autres éléments n'est pas figé et chacun d'eux n'occupe qu'une seule cellule. Voyez comment ils se disposent autour de l'élément contraint, en fonction de la valeur choisie pour la propriété grid-auto-flow.

Janvier

Février (fixé)

Mars
(élément étendu sur 2 lignes et 3 colonnes)

Avril

Mai

Juin

Juillet

Août

Septembre

Octobre

Novembre

Décembre

Prise en charge par les navigateurs (compatibilité).

La prise en charge de la propriété grid-auto-flow est globalement bonne.
Sauf pour l'ancien navigateur Internet explorer, qui traite les propriétés relatives aux grilles de façon différente. Reportez-vous à la page sur la propriété grid pour une description plus détaillée des problèmes de compatibilité avec Internet Explorer.

Propriété
grid-auto-flow

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `grid-auto-flow`.

Module CSS - Mise en page par grille - Niveau 1

Cette spécification définit comment réaliser des mises en page sous frome de grilles, composées de lignes et de colonnes, avec une structure du document qui reste très simple : un conteneur et autant d'éléments que de cellules. Beaucoup plus simple en tout cas que les tableaux.
Chacune des cellules peut être alignée horizontalement dans le largeur des colonnes, ou verticalement dans la hauteur des lignes. Elles peuvent aussi être réparties ou agrandies pour couvrir toute la place disponible. Le contenu de chacune des cellules peut être aligné horizontalement et verticalement.
Une nouvelle unité (fr) est disponible pour dimensionner les colonnes ou les lignes.

Concernant grid-auto-flow. Introduction des mises en page avec grille.
Définition des règles de placement automatique dans une grille.
Définition de la propriété grid-auto-flow.

07 Avril 2011
Document de travail.
29 Septembre 2016
Candidat à la recommandation.
Module CSS - Mise en page par grille - Niveau 2

Ce niveau 2 de la spécification sur les grilles introduit la notion de sous-grille. Il s'agit de grille imbriquées dans une autre, avec conservation des alignement de colonnes et/ou de lignes.

Concernant grid-auto-flow. Pas de changement concernant la propriété grid-auto-flow.

06 Février 2018
Document de travail.
18 Août 2020
Candidat à la recommandation.
Module CSS - Mise en page par grille - Niveau 3

Le niveau 3 de la spécification introduit une nouvelle notion : les grilles maçonnerie. Il s'agit de grilles dont seules les colonnes ou les lignes sont figées, l'autre dimension pouvant évoluer en fonction de la taille des éléments contenus. Ceci a nécessité l'ajout de plusieurs propriétés.

Concernant grid-auto-flow. Ajout des valeurs row-reverse, column-reverse et wrap-reverse pour la propriété grid-auto-flow.

19 Septembre 2024
Document de travail.