Convertit une chaîne quoted-printable en chaîne 8 bits
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
Club Affiliation Facile -PUB: 7JOURS -Webmarketing
PROMO ! CLUB AFFILIATION FACILE : lien publicitaire affiché pendant 1 semaine sur plusieurs sites à fort trafic, partage des commissions 1TPE et SystemeIO, plus de 20000 produits.
SITES RÉMUNÉRATEURS
Ces sites web "pépites" vous payent entre 500 et 1000 euros par mois pour effectuer de petites tâches simples !
