oujood.com

La propriété grid-auto-flow : un moyen simple de contrôler le placement des éléments dans une grille CSS

Utiliser la propriété CSS grid-auto-flow pour organiser les éléments non placés explicitement dans une grille
Découvrez comment la propriété grid-auto-flow peut vous aider à créer des grilles plus flexibles en CSS

chercher |

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éfautrow
Inherited: non
Animable : ouiEn savoir plus sur l'animable
Version: CSS1
Syntaxe JavaScript: object.style.gridAutoFlow="row dense"
Voici quelques exemples d'utilisation de la propriété grid-auto-flow :

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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion57165210 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



Voir aussi nos tutoriel :

Introduction les objets du javascript

Introduction les objets du javascript

border-top-color

Définit la couleur de la bordure supérieure

Balise canvas

Permet de dessiner des graphiques, à la volée, par l'intermédiaire de scripts (habituellement JavaScript)