propriété CSS grid-column-end

Définition et utilisation

Le nombre de colonnes que l'attribut grid-column-end traverse, ou la ligne de colonne (column-line) où l'élément se termine.

Voir l'exemple à la fin de la page.

Voir également :

Tutoriel CSS :Mise en page en grille CSS

Exemple

Exemple 1

Faites en sorte que "item1" traverse trois colonnes :

.item1 {
  grid-column-end: span 3;
}

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-end: 3;
}

Essayez-le vous-même

Syntaxe CSS

grid-column-end: auto|span n|column-line;

Valeur de l'attribut

Valeur Description
auto Valeur par défaut. L'élément traversera une seule colonne.
span n Définit le nombre de colonnes que l'élément traversera.
column-line Définit où s'arrête l'affichage de l'élément sur une colonne.

Détails techniques

Valeur par défaut : auto
Héritage : Non
Réalisation de l'animation : Supporté. Voir également :Propriétés liées aux animations.
Version : Module de mise en page en grille CSS niveau 1
Syntaxe JavaScript : object.style.gridColumnEnd="5"

Support du navigateur

Les nombres dans le tableau indiquent la version du navigateur la plus ancienne qui prend en charge cette propriété.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44