Attribut grid-column CSS
- Page précédente grid-auto-rows
- Page suivante grid-column-end
Définition et utilisation
L'attribut grid-column détermine la taille de l'élément de grille et sa position dans la mise en page en grille, c'est une abréviation des propriétés suivantes :
Voir également :
Tutoriel CSS :Mise en page en grille CSS
Exemple
Exemple 1
Faites en sorte que "item1" commence à la colonne 1 et couvre deux colonnes :
.item1 { grid-column: 1 / span 2; }
Exemple 2
Vous pouvez utiliser la valeur de la ligne de colonne pour remplacer le nombre de colonnes à traverser :
.item1 { grid-column: 1 / 3; }
Syntaxe CSS
grid-column: grid-column-start / grid-column-end;
Valeur de l'attribut
Valeur | Description |
---|---|
grid-column-start | Détermine à partir de quelle colonne commencer l'affichage de l'élément. |
grid-column-end | Détermine sur quelle ligne de colonne (column-line) arrêter l'affichage de l'élément, ou sur combien de colonnes il doit s'étendre. |
Détails techniques
Valeur par défaut : | auto / auto |
---|---|
Héritage : | Non |
Réalisation des animations : | Prise en charge. Voir :Propriétés liées aux animations. |
Version : | Module de mise en page en grille CSS niveau 1 |
Syntaxe JavaScript : | object.style.gridColumn="2 / span 2" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété en totalité.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
57 | 16 | 52 | 10 | 44 |
- Page précédente grid-auto-rows
- Page suivante grid-column-end