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

MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe