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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Syntaxe
/* 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;
Cette propriété peut prendre deux formes :
- la première avec un seul mot-clé parmi :
row
,column
oudense
- la seconde avec deux mots-clés :
row dense
oucolumn dense
.
Valeurs
row
- Les éléments sont organisés en remplissant chacune des lignes au fur et à mesure, quitte à en ajouter si besoin. Si aucune valeur entre
row
oucolumn
n'est fournie,row
sera la valeur par défaut. column
- Les éléments sont organisés en remplissant chacune des colonnes au fur et à mesure, quitte à en ajouter si besoin.
dense
- 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
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
Spécification | État | Commentaires |
---|---|---|
CSS Grid Layout La définition de 'grid-auto-flow' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Valeur initiale | row |
---|---|
Applicabilité | conteneurs de grille |
Héritée | non |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
Compatibilité des navigateurs
BCD tables only load in the browser