grid-auto-flow en CSS : ce que devient un élément qu'on n'a pas placé

Toute grille ne place pas nécessairement chaque élément à la main : dès qu'un enfant n'a pas de position explicite avec grid-column ou grid-row, la grille doit décider elle-même où le placer. grid-auto-flow contrôle exactement cette logique de placement automatique, celle qui s'applique par défaut à tous les éléments d'une grille simple.

Par défaut, cette logique remplit ligne par ligne, mais grid-auto-flow permet de la changer pour remplir colonne par colonne, ou pour combler les trous laissés par des éléments déjà positionnés à la main.

Définition

grid-auto-flow définit le sens dans lequel CSS Grid place automatiquement les éléments qui n'ont pas de position explicite, ainsi que le comportement de comblement des cases vides. Elle se pose sur le conteneur, pas sur les enfants, et n'a aucun effet sur les éléments positionnés explicitement avec grid-column et grid-row, qui gardent toujours la priorité sur le placement automatique.

Les valeurs disponibles

.grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: column;
}

Avec grid-auto-flow: column, les éléments sans position explicite se rangent colonne par colonne au lieu de ligne par ligne, ce qui change complètement la lecture visuelle d'une grille identique par ailleurs. C'est utile pour des mises en page qui doivent se lire de haut en bas avant de gauche à droite, comme un calendrier ou une liste organisée par catégories verticales.

Les pistes implicites : grid-auto-rows et grid-auto-columns

Quand un élément déborde des lignes ou colonnes explicitement définies, la grille crée des pistes implicites pour l'accueillir. grid-auto-rows et grid-auto-columns fixent la taille de ces pistes créées automatiquement, exactement comme grid-template-columns fixe la taille des colonnes explicites.

.grille {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 120px;
}

Sans grid-auto-rows, une ligne implicite prend une hauteur qui s'ajuste à son contenu, ce qui peut créer des lignes de hauteurs très inégales. La fixer à 120px, par exemple, garde une grille visuellement régulière même quand elle grandit au-delà de ce qui était prévu au départ.

Un exemple concret avec dense

.galerie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
}
.grande-vignette {
  grid-column: span 2;
  grid-row: span 2;
}

Dans une galerie où certaines vignettes occupent deux colonnes et deux lignes, le placement par défaut laisse souvent des cases vides après une grande vignette, le temps que la grille atteigne une nouvelle ligne complète. Avec grid-auto-flow: dense, les vignettes suivantes, plus petites, viennent combler ces trous au lieu d'attendre leur tour dans l'ordre strict du HTML, ce qui donne une mosaïque visuellement plus compacte.

Le piège de dense sur l'ordre visuel

La valeur dense réorganise visuellement les éléments pour combler les trous laissés par des éléments de tailles différentes, ce qui donne une grille plus compacte à l'œil. Mais cette réorganisation change uniquement l'affichage, jamais l'ordre du code HTML.

Questions fréquentes

Non, un élément positionné explicitement garde toujours sa position telle quelle. grid-auto-flow ne concerne que les éléments qui n'ont reçu aucune position, en décidant où les insérer parmi les cases restées libres.

Les deux comblent les trous, mais dans des directions différentes : row dense cherche des trous en avançant ligne par ligne, tandis que column dense les cherche en avançant colonne par colonne. Le résultat visuel dépend donc du sens choisi, autant que de la valeur dense elle-même.

Non, ce sont deux mécanismes différents. order change l'ordre visuel d'un élément précis, en Flexbox comme en Grid, alors que grid-auto-flow change uniquement la logique de placement automatique appliquée aux éléments sans position définie. Les deux peuvent d'ailleurs se combiner sur une même grille.