Propriété CSS grid-column-end

La propriété grid-column-end spécifie le nombre des colonnes que l'élément de grille couvrira et sur quelle colonne on doit arrêter d'afficher l'élément.

Valeur initiale auto
Appliquée à Éléments de grille.
Héritée Non.
Animable Oui. Le nombre des colonnes est animable.
Version CSS Grid Layout Module Level 1
Syntaxe DOM object.style.gridColumnEnd = "3";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .grid-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-gap: 5px;
      background-color: #8ebf42;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #eee;
      text-align: center;
      padding: 30px 0;
      font-size: 30px;
      }
      .box1 {
      grid-column-end: auto;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété grid-column-end</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
    </div>
  </body>
</html>

Un autre exemple, où grid-column-end est spécifiée par span 3:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .grid-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-gap: 10px;
      background-color: #ccc;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #888;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
      .box1 {
      grid-column-end: 3;
      }
      .span-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-gap: 10px;
      background-color: #888;
      padding: 10px;
      margin-top: 20px;
      }
      .span-container > div {
      background-color: #ccc;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
      .span-box1 {
      grid-column-end: span 3;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété grid-column-end</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <div class="span-container">
      <div class="span-box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Valeurs

Valeur Description
auto Seulement une colonne sera couverte. C'est la valeur initiale de cette propriété.
span n Spécifie le nombre des colonnes.
column-line Spécifie sur quelle colonne l'affichage de l'élément doit être fini.
initial Fait la propriété utiliser sa valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

chrome edge firefox safari opera
57.0+ 16.0+ 52.0+ 10.1+ 44.0+

Pratiquez vos connaissances

Qu'est-ce que la propriété 'Grid-column-end' en CSS ?
Trouvez-vous cela utile?