Grid-auto-flow - Propriété CSS
Résumé des caractéristiques de la propriété grid-auto-flow
row | column | denserowgrid-auto-flow passe d'une valeur à l'autre sans transition.Schéma syntaxique de grid-auto-flow.
grid-auto-flowLes 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.
(élément étendu sur 2 lignes et 3 colonnes)
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.
grid-auto-flowNavigateurs 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
Historique de la propriété grid-auto-flow.
-
Module CSS - Mise en page par grille - Niveau 1
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 2011Document de travail.
29 Septembre 2016Candidat à la recommandation.
-
Module CSS - Mise en page par grille - Niveau 2
Pas de changement concernant la propriétégrid-auto-flow.06 Février 2018Document de travail.18 Août 2020Candidat à la recommandation. -
Module CSS - Mise en page par grille - Niveau 3
Ajout des valeursrow-reverse,column-reverseetwrap-reversepour la propriétégrid-auto-flow.19 Septembre 2024Document de travail.
Voir aussi, dans la même spécification que grid-auto-flow.