Propriété grid-column-end

La propriété grid-column-end définit la position finale d'un élément dans la grille jusqu'à une colonne spécifique. La valeur de la propriété peut être un nombre positif ou négatif. Si nous spécifions un nombre positif, la position finale de l'élément est comptée de gauche à droite. En spécifiant un nombre négatif, l'élément sera positionné dans l'ordre inverse, c'est-à-dire de droite à gauche.

Une nuance importante de la propriété grid-column-end est que le numéro de la colonne spécifiée n'est pas inclus dans la position finale de l'élément - si nous spécifions le nombre 3, l'élément n'occupera que les première et deuxième colonnes.

Syntaxe

csssélecteur {
  grid-column-end: nombre positif ou négatif;
}

Exemple

Définissons les positions finales des éléments dans la grille :

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

#elem1 {
  grid-column-start: 1;
  grid-column-end: 2;
}
#elem2 {
  grid-column-start: 1;
  grid-column-end: 3;
}
#elem3 {
  grid-column-start: 1;
  grid-column-end: 4;
}

Результат:

Exemple

Maintenant, utilisons la propriété grid-column-start pour que les premier, deuxième et troisième éléments soient positionnés sur la première ligne. Et que le quatrième élément occupe toute la deuxième ligne :

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column-start: 1;
  grid-column-end: 2;
}
#elem2 {
  grid-column-start: 2;
  grid-column-end: 3;
}
#elem3 {
  grid-column-start: 3;
  grid-column-end: 4;
}
#elem4 {
  grid-column-start: 1;
  grid-column-end: 4;
}

Результат:

Exemple

Lorsque les colonnes occupées par des éléments adjacents se chevauchent, chaque élément suivant est décalé d'une ligne vers le bas. Utilisons cette particularité pour que le premier élément se positionne sur la première ligne, le deuxième - sur la deuxième, et les troisième et quatrième - sur la troisième ligne :

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column-start: 1;
  grid-column-end: 4;
}
#elem2 {
  grid-column-start: 2;
  grid-column-end: 3;
}
#elem3 {
  grid-column-start: 1;
  grid-column-end: 2;
}
#elem4 {
  grid-column-start: 3;
  grid-column-end: 4;
}

Результат:

Exemple

Maintenant, spécifions des nombres négatifs dans la propriété grid-column-end :

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

#elem1 {
  grid-column-start: 1;
  grid-column-end: -4;
}
#elem2 {
  grid-column-start: 1;
  grid-column-end: -3;
}
#elem3 {
  grid-column-start: 1;
  grid-column-end: -2;
}

Результат:

Voir aussi