Affichage fichiers XML
grid-auto-columns : la clé pour une meilleure gestion des colonnes dans vos grilles CSS
La propriété CSS grid-auto-columns définit la largeur des colonnes dans un objet grille lorsque celles-ci sont créées automatiquement. Les colonnes sont créées automatiquement lorsqu'un élément est ajouté à la grille et qu'il y a assez de place dans la grille pour l'accueillir, mais qu'il n'y a pas de ligne définie pour lui.
La Syntaxe CSS
La syntaxe de la propriété grid-auto-columns est la suivante :
grid-auto-columns: <taille> | <rapport> | minmax(<taille minimum>, <taille maximum>) | fit-content(<taille>) | auto;<taille> peut être une valeur en pixels (px), en pourcentage (%) ou en points de rem (rem). <rapport> est un rapport de colonnes utilisant la syntaxe <nombre> / <nombre>, par exemple 3 / 4. Cela signifie que la colonne sera trois fois plus grande que la colonne suivante.
minmax(<taille minimum>, <taille maximum>) permet de définir une plage de tailles pour la colonne. La colonne prendra la taille minimale lorsqu'il y a assez de place et la taille maximale lorsqu'il n'y a pas assez de place.
fit-content(<taille>) définit la taille de la colonne en fonction du contenu de la cellule de grille la plus grande de la colonne. auto laisse le navigateur déterminer la taille de la colonne.
La propriété grid-auto-columns est prise en charge par la plupart des navigateurs modernes, y compris Internet Explorer à partir de la version 11.
Voici quelques exemples d'utilisation de la propriété grid-auto-columns :
Exemple Copier le code
/* Définit une colonne de 200 pixels de largeur */ grid-auto-columns: 200px; /* Définit une colonne de 50% de la largeur de la grille */ grid-auto-columns: 50%; /* Définit une colonne de la taille minimale de 150 pixels et de la taille maximale de 250 pixels */ grid-auto-columns: minmax(150px, 250px); /* Définit une colonne de la taille du contenu le plus grand de la colonne */ grid-auto-columns: fit-content(100px); /* Laisse le navigateur déterminer la taille de la colonne */ grid-auto-columns: auto;
Voici un exemple de code HTML et CSS qui utilise la propriété grid-auto-columns :
La propriété grid-auto-columns peut être combinée avec d'autres propriétés de grille pour contrôler l'apparence et le comportement de la grille. Par exemple, la propriété grid-template-columns peut être utilisée pour définir les colonnes de la grille de manière explicite, tandis que la propriété grid-auto-flow peut être utilisée pour contrôler l'ordre dans lequel les éléments sont placés dans les colonnes et les lignes créées automatiquement.
Voici un exemple de code qui utilise la propriété grid-auto-columns avec d'autres propriétés de grille :
Exemple Copier le code
.grid {
display: grid;
grid-template-columns: 200px 200px; /* Définit deux colonnes de 200 pixels de largeur */
grid-auto-columns: 100px; /* Définit la largeur des colonnes créées automatiquement à 100 pixels */
grid-auto-flow: column; /* Définit l'ordre de remplissage de la grille en colonne plutôt qu'en ligne */
}
Dans cet exemple, la grille comportera deux colonnes de 200 pixels de largeur, définies explicitement avec la propriété grid-template-columns. Si des éléments sont ajoutés à la grille et qu'il n'y a pas suffisamment de place dans les colonnes existantes, de nouvelles colonnes seront créées automatiquement avec une largeur de 100 pixels, grâce à la propriété grid-auto-columns. Les éléments seront également ajoutés aux colonnes créées automatiquement dans l'ordre de la colonne, plutôt que de la ligne, grâce à la propriété grid-auto-flow.
En résumé, la propriété CSS grid-auto-columns permet de définir la largeur des colonnes créées automatiquement dans un objet grille. Elle peut être utilisée en combinaison avec d'autres propriétés de grille pour contrôler l'apparence et le comportement de la grille.
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | ouiEn savoir plus sur l'animable |
| Version: | CSS1 |
| Syntaxe JavaScript: | object.style.gridAutoColumns="120px" |
Prise en charge de la propriété dans les navigateurs
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 qui utilise la propriété grid-auto-columns :
Exemple Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: grid;
/* Définit deux colonnes de 200 pixels de largeur */
grid-template-columns: 200px 200px;
/* Définit la largeur des colonnes créées automatiquement à 100 pixels */
grid-auto-columns: 100px;
/* Définit l'ordre de remplissage de la grille en colonne plutôt qu'en ligne */
grid-auto-flow: column;
}
.item {
background-color: lightblue;
border: 1px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<h1>La propriété css grid-auto-columns</h1>
<div class="grid">
<div class="item">Élément 1</div>
<div class="item">Élément 2</div>
<div class="item">Élément 3</div>
<div class="item">Élément 4</div>
<div class="item">Élément 5</div>
<div class="item">Élément 6</div>
</div>
</body>
</html>
Dans cet exemple, la grille comportera deux colonnes de 200 pixels de largeur, définies explicitement avec la propriété grid-template-columns. Si des éléments sont ajoutés à la grille et qu'il n'y a pas suffisamment de place dans les colonnes existantes, de nouvelles colonnes seront créées automatiquement avec une largeur de 100 pixels, grâce à la propriété grid-auto-columns. Les éléments seront également ajoutés aux colonnes créées automatiquement dans l'ordre de la colonne, plutôt que de la ligne, grâce à la propriété grid-auto-flow.
En résumé, la propriété CSS grid-auto-columns permet de définir la largeur des colonnes créées automatiquement dans un objet grille. Elle peut être utilisée en combinaison avec d'autres propriétés de grille pour contrôler l'apparence et le comportement de la grille.