Propriété CSS grid-auto-flow

La propriété grid-auto-flow contrôle le fonctionnement de l'algorithme de placement automatique de la grille — c'est-à-dire la façon dont les éléments que vous n'avez pas positionnés explicitement sont répartis dans la grille.

Lorsque vous placez des éléments manuellement avec grid-column-start, grid-row-start ou grid-area, le navigateur les positionne exactement là où vous le demandez. Tous les autres éléments sont placés automatiquement, et grid-auto-flow détermine l'ordre et la direction que le navigateur utilise pour remplir les cellules restantes. C'est donc la propriété à utiliser lorsque vous avez un conteneur de grille avec un nombre variable ou inconnu d'enfants et que vous souhaitez les disposer de manière prévisible sans dimensionner chacun d'eux.

Cette propriété accepte les mots-clés suivants : row, column, dense, row-dense et column-dense. Vous pouvez utiliser un mot-clé unique (row, column ou dense) ou deux mots-clés dont l'un définit la direction et l'autre est dense (row dense / column dense). Si vous ne précisez pas de direction, row est supposé.

Fonctionnement

row (valeur par défaut) remplit la grille ligne par ligne, de gauche à droite, en ajoutant de nouvelles lignes si nécessaire.
column remplit une colonne à la fois, de haut en bas, en ajoutant de nouvelles colonnes si nécessaire.
dense active un algorithme de remplissage dense. Par défaut (remplissage clairsemé), l'algorithme avance toujours vers l'avant, de sorte qu'un grand élément peut laisser un vide derrière lui que les éléments suivants plus petits ignorent. Avec dense, le navigateur revient en arrière pour remplir ces trous avec tout élément qui convient — ce qui peut faire apparaître les éléments dans un ordre différent de l'ordre du DOM. Ne l'utilisez que lorsque la densité visuelle prime sur l'ordre de lecture et de tabulation, car cela peut nuire à l'accessibilité.

Valeur initiale	row
S'applique à	Conteneurs de grille.
Héritage	Non.
Animatable	Non.
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	object.style.gridAutoFlow = "row";

Syntaxe

Syntaxe de la propriété CSS grid-auto-flow

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

Exemple : grid-auto-flow: column

Avec grid-auto-flow: column, les quatre éléments remplissent la grille colonne par colonne. Comparez avec l'exemple row qui suit pour voir la différence dans l'ordre de placement.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grey-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-flow property example</h2>
    <h3>grid-auto-flow: column</h3>
    <div class="grey-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Essayez vous-même »

Ici, les éléments sont placés en remplissant chaque colonne. Dans l'exemple suivant, nous pouvons voir que les éléments sont placés en remplissant chaque ligne.

Exemple : grid-auto-flow: row

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .white-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        grid-auto-flow: row;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .white-container > div {
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-flow property example</h2>
    <h3>grid-auto-flow: row</h3>
    <div class="white-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple : grid-auto-flow: row (avec placement explicite)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: row;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #00f3ff;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #ff00d4;
      }
      .box3 {
        background-color: #827c7c;
      }
      .box4 {
        grid-column-start: 2;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple : grid-auto-flow: column (avec placement explicite)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: column;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #00f3ff;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #827c7c;
      }
      .box3 {
        background-color: #ff00d4;
      }
      .box4 {
        grid-column-start: 2;
        background-color: #4cbb13;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple : grid-auto-flow: column-dense

Les deux exemples suivants illustrent les variantes de remplissage dense. Comme box1 est explicitement placé sur la ligne 3 (grid-row-start: 3), il laisse un vide près du début de la grille. Le mot-clé dense permet au navigateur de ramener un élément ultérieur dans ce vide au lieu de le laisser vide — compact, mais les éléments ne suivent plus l'ordre source.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: column-dense;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #0ad6e0;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #841c72;
      }
      .box3 {
        background-color: #827c7c;
      }
      .box4 {
        grid-column-start: 2;
        background-color: #4cbb13;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple : grid-auto-flow: row-dense

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: row-dense;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #0ad6e0;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #841c72;
      }
      .box3 {
        background-color: #827c7c;
      }
      .box4 {
        grid-column-start: 2;
        background-color: #4cbb13;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description	Essayer
row	Place les éléments en remplissant chaque ligne, en ajoutant de nouvelles lignes si nécessaire. Il s'agit de la valeur par défaut de cette propriété.	Essayer »
column	Place les éléments en remplissant chaque colonne, en ajoutant de nouvelles colonnes si nécessaire.	Essayer »
dense	Place les éléments pour combler les trous dans la grille, quelle que soit la taille des éléments. Cela peut amener les éléments placés automatiquement à apparaître dans un ordre différent de l'ordre du DOM.	Essayer »
row-dense	Place les éléments en remplissant chaque ligne et comble les trous dans la grille.	Essayer »
column-dense	Place les éléments en remplissant chaque colonne et comble les trous dans la grille.	Essayer »
initial	Applique la valeur par défaut de la propriété.
inherit	Hérite de la propriété depuis son élément parent.

Quand l'utiliser

Utilisez grid-auto-flow lorsque le nombre d'éléments de la grille est dynamique — une liste de cartes, un mur de photos, un nuage de tags — et que vous souhaitez que le navigateur les place pour vous. Passez à column lorsque le contenu doit se lire de haut en bas avant de passer à la ligne suivante, et ajoutez dense uniquement lorsque remplir chaque vide est plus important que conserver les éléments dans l'ordre source.

La taille des pistes créées implicitement est contrôlée séparément par grid-auto-columns et grid-auto-rows. Pour les mises en page explicites, consultez grid-template et le chapitre principal sur CSS Grid.

Exercice

Pratique

Que fait la propriété CSS grid-auto-flow ?

Elle définit la distribution des lignes et des colonnes dans une grilleElle définit la couleur de chaque mot dans une grille de texteElle contrôle le placement automatique des éléments de la grilleElle définit la taille des lignes de la grilleElle crée une grille tridimensionnelle