Fiche d'apprentissage : grid-auto-flow

1. À quoi sert grid-auto-flow ?

La propriété grid-auto-flow indique dans quel sens les éléments sont placés automatiquement dans une grille CSS.

Elle est utile quand on a plusieurs éléments dans un conteneur en display: grid; et qu’on laisse le navigateur les positionner tout seul.

2. grid-auto-flow: row;

Avec row, les éléments se placent ligne par ligne.

Le navigateur remplit d’abord la première ligne de gauche à droite, puis passe à la ligne suivante. 

.container {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: repeat(2, 80px);
  gap: 10px;
  grid-auto-flow: row;
}
1
2
3
4
5
6

Ordre de placement : 1 → 2 → 3 sur la première ligne, puis 4 → 5 → 6 sur la deuxième ligne.

3. grid-auto-flow: column;

Avec column, les éléments se placent colonne par colonne.

Le navigateur remplit d’abord la première colonne de haut en bas, puis passe à la colonne suivante. 

.container {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: repeat(2, 80px);
  gap: 10px;
  grid-auto-flow: column;
}
1
2
3
4
5
6

Ordre de placement : 1 → 2 dans la première colonne, puis 3 → 4 dans la deuxième, puis 5 → 6 dans la troisième.

4. Différence visuelle rapide

5. Résumé simple

row : le navigateur place les éléments comme on lit une ligne de texte, de gauche à droite puis à la ligne.

column : le navigateur place les éléments de haut en bas dans une colonne, puis passe à la colonne suivante.