Propriété CSS grid-column
Exemple
Faites en sorte que "item1" commence sur la colonne 1 et s'étende sur 2 colonnes :
.item1 {
grid-column: 1 / span 2;
}
Définition et utilisation
La grid-column
propriété spécifie la taille et l'emplacement d'un élément de grille dans une disposition de grille et est une propriété abrégée pour les propriétés suivantes :
Valeur par défaut: | voiture voiture |
---|---|
Hérité: | non |
Animable : | Oui. En savoir plus sur l'animation |
Version: | Module de disposition de grille CSS niveau 1 |
Syntaxe JavaScript : | objet .style.gridColumn="2 / span 2" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
grid-column | 57 | 16 | 52 | 10 | 44 |
Syntaxe CSS
grid-column: grid-column-start /
grid-column-end;
Valeurs de propriété
Value | Description |
---|---|
grid-column-start | Specifies on which column to start displaying the item. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
Plus d'exemples
Exemple
Vous pouvez utiliser des valeurs de ligne de colonne à la place des nombres de colonnes à couvrir :
.item1 {
grid-column: 1 / 3;
}
Pages connexes
Tutoriel CSS : Mise en page de la grille CSS