grid-column
Détermine dans quelles colonnes de la grille un élément commence et se termine.
- Valeur initiale
auto- Héritée
- Non
- Animable
- non
- S’applique à
- éléments grid et éléments en position absolue dans un conteneur grid
- JavaScript
element.style.gridColumn = "1 / 3"
Exemple
#.article {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.article .hero {
grid-column: 1 / -1;
}<div class="article stage">
<div class="box hero">Bannière sur toute la largeur</div>
<div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div>
</div>Définition et utilisation
#La propriété grid-column est un raccourci pour grid-column-start et grid-column-end. Les lignes de la grille sont numérotées à partir de 1, et l’écriture 1 / 3 signifie : commencer à la ligne 1, finir à la ligne 3, c’est-à-dire occuper les deux premières colonnes.
Au lieu de la ligne de fin, vous pouvez donner une étendue : span 2 signifie deux colonnes à partir de l’endroit où l’élément serait tombé. Les nombres négatifs comptent depuis la fin, donc 1 / -1 étire l’élément sur toute la largeur de la grille.
Un élément avec une position explicite est placé en premier, et les autres éléments remplissent les places libres autour de lui.
Syntaxe
#grid-column: <début> [ / <fin> ]?;Valeurs
#Valeurs en pratique
#auto
.target { grid-column: auto; }span 2
.target { grid-column: span 2; }2 / 4
.target { grid-column: 2 / 4; }1 / -1
.target { grid-column: 1 / -1; }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
#grid-column: 1 / -1est la façon la plus simple d’obtenir un élément sur toute la largeur de la grille, quel que soit le nombre de colonnes.spanest plus pratique que les numéros de ligne quand peu vous importe la colonne où l’élément commence.
Entrées associées
#- grid-rowDétermine dans quelles lignes de la grille un élément commence et se termine.
- grid-areaAssigne un élément à une zone nommée de la grille, ou règle en une fois ses lignes et ses colonnes.
- grid-template-columnsDéfinit les colonnes de la grille : leur nombre et leur largeur.
- grid-auto-flowDécide comment les éléments sans position définie remplissent la grille.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.