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>

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>

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.

Support de Navigateurs

57.0+ 16.0+ 52.0+ 10.1+ 44.0+


Trouvez-vous cela utile?

Articles Associées