Propriété CSS grid-auto-flow

La propriété grid-auto-flow contrôle la façon dont les éléments placés automatiquement sont coulés à la grille.

Cette propriété a les valeurs suivantes: row, column, dense, row-dense, column-dense. Si ni la valeurs "row", ni la valeur "column" n'est fournie, "row" est supposée.

Valeur initiale	row
Appliquée à	Conteneurs de grille.
Héritée	Non.
Animable	Oui.
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	object.style.gridAutoFlow = "row";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .grey-container {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto;
      grid-auto-flow: column;
      grid-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>Exemple de la propriété grid-auto-flow</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!

Voici un exemple avec la valeur "row":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .white-container {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto;
      grid-auto-flow: row;
      grid-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>Exemple de la propriété grid-auto-flow</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!

Valeurs

Valeur	Description
row	Place les éléments en remplissant chacune des lignes, en ajoutant nouvelles lignes si besoin. C'est la valeur initiale de cette propriété.
column	Place les élément en remplissant chacune des lignes, en ajoutant nouvelles colonnes si besoin.
dense	Place les élément pour remplir les trous dans la grille si des éléments plus petits arrivent ensuite.
row-dense	Place les éléments en remplissant chacune des lignes, et remplit les trous dans la grille.
column-dense	Place les éléments en remplissant chacune des colonnes, et remplit les trous dans la grille.
initial	Fait la propriéé utiliser sa valeur initiale.
inherit	Hérite la propriété de son élément parent.