Propriété CSSGrid

grid-auto-flow

Décide comment les éléments sans position définie remplissent la grille.

Valeur initiale: row
Héritée: Non
Animable: non
S’applique à: conteneurs grid
JavaScript: element.style.gridAutoFlow = "column"

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Valeurs
Valeurs en pratique
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

CSS

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 8px;
}

.gallery .big {
  grid-column: span 2;
  grid-row: span 2;
}

Aperçu

Définition et utilisation

La propriété grid-auto-flow contrôle l’algorithme de placement automatique. Par défaut (row), les éléments remplissent la grille ligne par ligne, et les nouvelles lignes s’ajoutent en bas. Avec column, la grille se remplit par colonnes et s’agrandit vers la droite.

Le mot-clé dense active le mode dense : le navigateur revient sur les trous précédents et les remplit avec des éléments plus petits apparus plus tard. C’est utile dans les galeries avec des éléments de tailles différentes.

Le mode dense peut changer l’ordre visuel des éléments par rapport au code, ce qui affecte la navigation au clavier. Utilisez-le là où l’ordre n’a pas d’importance.

Syntaxe

grid-auto-flow: row | column | row dense | column dense;

Valeurs

row
Remplissage par lignes. Les éléments trop larges laissent des trous.
row dense
Les trous se remplissent avec des éléments plus petits apparus plus tard.
column
Remplissage par colonnes, la grille s’agrandit horizontalement.

Valeur	Description
row	Remplissage par lignes. Les éléments trop larges laissent des trous.
row dense	Les trous se remplissent avec des éléments plus petits apparus plus tard.
column	Remplissage par colonnes, la grille s’agrandit horizontalement.

Valeurs en pratique

row

Remplissage par lignes. Les éléments trop larges laissent des trous.

.demo { grid-auto-flow: row; }

row dense

Les trous se remplissent avec des éléments plus petits apparus plus tard.

.demo { grid-auto-flow: row dense; }

column

Remplissage par colonnes, la grille s’agrandit horizontalement.

.demo { grid-auto-flow: column; }
.wide { grid-column: auto; grid-row: span 2; }

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

Le mode dense fonctionne le mieux dans les galeries de photos, où l’ordre n’a pas d’importance.
Pour des listes de cartes horizontales, combinez grid-auto-flow: column avec grid-auto-columns.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez CSS dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours