grid-auto-flow

La propriété grid-auto-flow permet de contrôler la façon dont fonctionne l'algorithme de placement automatique. Celui-ci définit exactement comme les objets placés automatiquement s'inscrivent dans la grille.

/* Valeurs avec un mot-clé */
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/* Valeurs globales */
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: unset;

Syntaxe

Cette propriété peut prendre deux formes :

• la première avec un seul mot-clé parmi : row, column ou dense
• la seconde avec deux mots-clés : row dense ou column dense.

Valeurs

row

Un mot-clé qui indique que l'algorithme de placement automatique organisera les éléments en remplissant chacune des lignes au fur et à mesure, quitte à en ajouter si besoin. Si aucune valeur entre row ou column n'est fournie, row sera la valeur par défaut..

column

Un mot-clé qui indique que l'algorithme de placement automatique organisera les éléments en remplissant chacune des colonnes au fur et à mesure, quitte à en ajouter si besoin .

dense

Un mot-clé qui indique que l'algorithme de placement automatique utilisera une méthode de « regroupement dense » où il essaie de remplir les trous dans la grille si des éléments plus petits arrivent ensuite. De fait, on peut obtenir une impression de désordre alors qu'il s'agit simplement du comblement des espaces libres.

Si cette valeur est absente, le moteur utilisera un algorithme simple qui ne fait que se déplacer vers l'avant, sans revenir vers les espaces vides. De cette façon, les éléments apparaitront nécessairement dans l'ordre mais pourront laisser des trous.

Syntaxe formelle

[ row | column ] || dense

Exemples

CSS

#grid {
  height: 200px;
  width: 200px;
  display: grid;
  grid-gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  grid-auto-flow: column;  /* ou 'row', 'row dense', 'column dense' */
}

#item1 {
  background-color: lime;
  grid-row-start: 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

#item4 {
  grid-column-start: 2;
  background-color: red;
}

#item5 {
  background-color: aqua;
}

HTML

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
<select id="direction" onchange="changeGridAutoFlow()">
  <option value="column">column</option>
  <option value="row">row</option>
</select>
<input id="dense" type="checkbox" onchange="changeGridAutoFlow()">
<label for="dense">dense</label>

JavaScript

function changeGridAutoFlow() {
  var grid = document.getElementById("grid");
  var direction = document.getElementById("direction");
  var dense = document.getElementById("dense");
  var gridAutoFlow = direction.value === "row" ? "row" : "column";

  if (dense.checked) {
    gridAutoFlow += " dense";
  }

  grid.style.gridAutoFlow = gridAutoFlow;
}

Résultat

Spécifications

Compatibilité des navigateurs

[1] Depuis Chrome 29.0, cette fonctionnalité était implémentée via le marqueur Fonctionnalités expérimentales de la plate-forme Web sous chrome://flags.

[2] Cette fonctionnalité était disponible depuis Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37) en activant la préférence layout.css.grid.enabled qui valait false par défaut. Depuis Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49), elle est activée par défaut.

[3] Depuis Opera 28.0, cette fonctionnalité peut être activée via la préférence Activer les fonctionnalités expérimentales de la plateforme web via chrome://flags.

[4] Implémentation expérimentale disponible via Safari Technological Preview.

Voir aussi

• grid-auto-rows
• grid-auto-columns
• grid
• Guide : le placement automatique sur la grille
• Tutoriel vidéo : Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)