Définit un morceau de code informatique
Apprenez à maîtriser la propriété grid-auto-flow pour créer des grilles de mise en page avancées en CSS
La propriété CSS grid-auto-flow détermine comment les éléments non placés explicitement dans le grille sont placés dans la grille. Voici la syntaxe de cette propriété :
La Syntaxe CSS
grid-auto-flow: [row | column] || dense;La valeur par défaut de grid-auto-flow est row, ce qui signifie que les éléments non placés explicitement seront ajoutés à la grille en commençant par la première ligne et en passant à la suivante si nécessaire. Si vous définissez la valeur sur column, les éléments seront ajoutés à la grille en commençant par la première colonne et en passant à la suivante si nécessaire.
Vous pouvez utiliser row ou column seuls, ou les combiner avec dense. Par exemple,
grid-auto-flow: row indique que les éléments seront ajoutés à la grille en commençant par la première ligne et en passant à la suivante si nécessaire,
tandis que grid-auto-flow: row dense indique que les éléments seront placés de manière à remplir les espaces vides dans la grille avant de passer à la ligne suivante.
| Valeurs par défaut | row |
|---|---|
| Inherited: | non |
| Animable : | ouiEn savoir plus sur l'animable |
| Version: | CSS1 |
| Syntaxe JavaScript: | object.style.gridAutoFlow="row dense" |
Exemple Copier le code
/* Ajoute les éléments non placés explicitement à la grille en commençant par la première colonne et en passant à la suivante si nécessaire */ grid-auto-flow: column; /* Ajoute les éléments non placés explicitement à la grille en commençant par la première ligne et en passant à la suivante si nécessaire, en remplissant les espaces vides si possible */ grid-auto-flow: row dense;
Prise en charge de la propriété dans les navigateurs
La propriété grid-auto-flow est prise en charge par les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge.Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 57 | 16 | 52 | 10 | 44 |
Voici un exemple de code HTML et CSS montrant comment utiliser grid-auto-flow :
Exemple Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense;
}
.item {
background-color: lightblue;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<h1>La propriété css grid-auto-flow</h1>
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>
Dans cet exemple, la grille a trois colonnes de largeur égale, et la propriété grid-auto-flow: row dense indique que les éléments non placés explicitement
Voici quelques conseils sur la façon de décider quand utiliser row ou column avec grid-auto-flow, en fonction de la mise en page souhaitée et des contraintes de l'interface utilisateur :
Si vous souhaitez que les éléments non placés explicitement soient ajoutés à la grille en commençant par la première ligne et en passant à la suivante si nécessaire, utilisez grid-auto-flow: row. Cela peut être utile si vous avez une mise en page qui s'étend sur plusieurs colonnes, mais qui doit être remplie ligne par ligne.:
Si vous souhaitez que les éléments non placés explicitement soient ajoutés à la grille en commençant par la première colonne et en passant à la suivante si nécessaire, utilisez grid-auto-flow: column. Cela peut être utile si vous avez une mise en page qui s'étend sur plusieurs lignes, mais qui doit être remplie colonne par colonne.:
Si vous souhaitez remplir les espaces vides dans la grille avant de passer à la ligne ou à la colonne suivante, utilisez grid-auto-flow: row dense ou grid-auto-flow: column dense. Cela peut être utile si vous avez une mise en page qui doit être remplie de manière compacte et efficace.:
Il est important de tenir compte de la mise en page souhaitée et des contraintes de l'interface utilisateur lorsque vous décidez quelle valeur utiliser avec grid-auto-flow. Par exemple, si vous avez une mise en page qui doit être adaptée à différentes tailles d'écran, vous voudrez peut-être utiliser grid-auto-flow: column pour que les éléments soient ajoutés à la grille de manière à remplir les espaces vides sur les écrans plus larges, tout en conservant une présentation en colonnes sur les écrans plus petits.:
Pour plus de détails voir aussi notre tutoriel sur CSS grid : vue en grille