Attribut grid-auto-flow CSS

Définition et utilisation

L'attribut grid-auto-flow contrôle la manière dont les éléments automatiques sont insérés dans la grille.

Voir également :

Tutoriel CSS :Mise en page en grille CSS

Exemple

Exemple 1

Insérez automatiquement des éléments en colonnes :

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

Essayez-le vous-même

Exemple 2

Remplissez tous les trous dans la grille en ajoutant la valeur "dense" :

.grid-container {
  display: grid;
  grid-auto-flow: row dense;
}

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur Description
row Valeur par défaut. Placez les éléments en remplissant chaque rangée.
column Placez les éléments en remplissant chaque colonne.
dense Placez les éléments pour remplir tout trou dans la grille.
row dense Placez les éléments en remplissant chaque rangée et en remplissant tout trou dans la grille.
column dense Placez les éléments en remplissant chaque colonne et en remplissant tout trou dans la grille.

Détails techniques

Valeur par défaut : row
Héritage : Non
Réalisation des animations : Supporté. Voir :Propriétés liées aux animations.
Version : Module de mise en page en grille CSS niveau 1
Syntaxe JavaScript : object.style.gridAutoFlow="row dense"

Support du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété en totalité.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44