Grid-auto-flow - Propriété CSS

Schéma de la syntaxe de grid-auto-flow.

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.

Valeurs pour grid-auto-flow.

Dans les exemple ci-dessous, les colonnes et les lignes ont été définies par grid-template-columns et grid-template-rows.

• grid-auto-flow: row;

  Les éléments se placent les uns à la suite des autres en remplissant la grille ligne par ligne.

  1

  2

  3

  4

  5

  6

  7

  8
  grid-auto-flow:row;
• grid-auto-flow: column;

  Les éléments se placent les uns à la suite des autres en remplissant la grille par colonnes.

  1

  2

  3

  4

  5

  6

  7

  8
  grid-auto-flow:column;
• 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 fixé en colonne 1 et en ligne 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.

  1

  2

  3

  4

  5

  6

  7
  grid-auto-flow:row;

  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é.

  1

  2

  3

  4

  5

  6

  7
  grid-auto-flow:row dense;

  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.

  1

  2

  3

  4

  5

  6

  7

  8
  grid-auto-flow:row;

  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é.

  1

  2

  3

  4

  5

  6

  7

  8
  grid-auto-flow:row dense;
• 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. Les éléments fixés sur une colonne ou une ligne sont en bleu.

  1

  2

  3

  4

  5

  6

  7

  8
  grid-auto-flow:column dense;
• 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.

Exemple d'animation de 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.

Compatibilité des navigateurs avec grid-auto-flow.

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.

1

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

Histoire 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.

  

  

  

Voir aussi, dans la même spécification que grid-auto-flow.

Propriétés :

Fonctions :