grid-auto-flow - Propriété CSS
Résumé des caractéristiques de la propriété grid-auto-flow
row
| column
| dense
row
grid-auto-flow
passe d'une valeur à l'autre sans transition.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.
- grid-auto-flow:
initial
; grid-auto-flow:inherit
; grid-auto-flow:revert
; grid-auto-flow:revert-layer
; grid-auto-flow:unset
;La valeur initiale est :
.row
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.
Simulateur.
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-flow
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que grid-auto-flow
.
Les spécifications CSS éditées par le W3C sont organisées en modules. grid-auto-flow
fait partie du Module CSS - Mise en page par grille (CSS Grid Layout Module). Les définitions suivantes sont également décrites dans ce même module.