w3docs logo

Propriété CSS grid-column-start

La propriété grid-column-start spécifie la position du début de l'élément dans la colonne.

Valeur initiale auto
Appliquée à Éléments de grille.
Héritée Non.
Animable Oui. Le point du début est animable.
Version CSS Grid Layout Module Level 1
Syntaxe DOM object.style.gridColumnStart = "6";

Syntax

grid-column-start: 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: 10px;
      background-color: #666;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #ccc;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
      .box1 {
      grid-column-start: 6;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété grid-column-start</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>
  </body>
</html>

Un autre exemple, dans lequel la propriété grid-column-start est spécifiée par span 2:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .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: #fff;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
      .span-box1 {
      grid-column-start:  span 2;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété grid-column-start</h2>
    <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 popriété.
span n Spécifie le nombre des colonne que l'élément couvrira.
column-line Spécifie sur quelle colonne l'affichage de l'élément doit commencer.
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

Quelle est l'importance de l'utilisation de 'grid-column-start' en CSS ?
Trouvez-vous cela utile?