grid-auto-columns
Fixe la largeur des colonnes que la grille crée automatiquement.
- Valeur initiale
auto- Héritée
- Non
- Animable
- oui, en tant que longueur, pourcentage ou fr
- S’applique à
- conteneurs grid
- JavaScript
element.style.gridAutoColumns = "120px"
Exemple
#.carousel {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 140px;
gap: 10px;
overflow-x: auto;
}<div class="carousel stage">
<div class="box">Module 1</div><div class="box">Module 2</div><div class="box">Module 3</div>
<div class="box">Module 4</div><div class="box">Module 5</div>
</div>Définition et utilisation
#La propriété grid-auto-columns concerne les colonnes implicites, c’est-à-dire celles qui ne sont pas dans grid-template-columns, mais qui apparaissent quand un élément déborde de la grille définie ou quand grid-auto-flow est réglé sur column.
Par défaut, les colonnes implicites ont une largeur auto, c’est-à-dire ajustée au contenu. En donnant une valeur fixe, par exemple 120px, vous obtenez des colonnes égales dans un bandeau défilant horizontal.
Vous pouvez donner plusieurs valeurs, elles se répètent alors cycliquement pour les colonnes implicites suivantes.
Syntaxe
#grid-auto-columns: <taille de piste>+;Valeurs
#Valeurs en pratique
#auto
.demo { grid-auto-columns: auto; }70px
.demo { grid-auto-columns: 70px; }1fr
.demo { grid-auto-columns: 1fr; }40px 80px
.demo { grid-auto-columns: 40px 80px; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Combiner
grid-auto-flow: columnetgrid-auto-columnsest une façon pratique d’obtenir un bandeau horizontal de cartes. - Les colonnes définies dans
grid-template-columnsne sont pas concernées par cette propriété.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.