Attribut grid-column CSS

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;
}

Essayez-le vous-même

Exemple 2

Vous pouvez utiliser la valeur de la ligne de colonne pour remplacer le nombre de colonnes à traverser :

.item1 {
  grid-column: 1 / 3;
}

Essayez-le vous-même

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