Propriété CSS grid-column

La propriété grid-column définit la taille et l'emplacement d'un élément sur la grille. C'est une propiriété raccourcie pour les propriétés suivantes:

Valeur initiale auto auto
Appliquée à Éléments de grille.
Héritée Non.
Animable Oui. Les éléments sont animables.
Version CSS Grid Layout Module Level 1
Syntaxe DOM object.style.gridColumn = "1/ span 3";

Syntaxe

grid-column: grid-column-start / grid-column-end | 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: 10px;
      background-color: #ccc;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #666;
      text-align: center;
      padding: 20px 0;
      font-size: 20px;
      }
      .box6 {
      grid-column: auto auto;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété grid-column</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
      <div class="box7">7</div>
    </div>
  </body>
</html>

Un autre exemple, où grid-column est 1 / 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: 1 / 3;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété grid-column</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
      <div class="box7">7</div>
    </div>
  </body>
</html>

Valeurs

Valeur Description
grid-column-start Spécifie l'emplacement du début de l'élément dans la colonne.
grid-column-end Spécifie l'emplacement de la fin de l'élément dans la colonne.
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

Quelles instructions sont correctes à propos de l'utilisation de la propriété 'grid-column' en CSS ?
Trouvez-vous cela utile?