Propriété CSS grid-column-start

La propriété grid-column-start spécifie la position de départ de l'élément au sein de la colonne en ajoutant une ligne, une étendue (span) ou rien. En d'autres termes, elle définit la position de départ inline de sa zone de grille.

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

Syntaxe

Syntaxe CSS de grid-column-start

css

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

Exemple de la propriété grid-column-start :

Exemple de code CSS pour grid-column-start

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        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>Grid-column-start property example</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>

Try it Yourself »

Résultat

Propriété grid-column-start

Ici, nous avons spécifié à partir de quelle colonne l'affichage de l'élément doit commencer. Remarque : Comme le modèle de grille ne définit que 4 colonnes, les lignes 5 et 6 sont créées implicitement pour accueillir l'élément. Dans l'exemple suivant, nous avons spécifié le nombre de colonnes que l'élément va couvrir.

Exemple de la propriété grid-column-start spécifiée comme "span 2" :

Autre exemple de code CSS pour grid-column-start

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .span-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        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>Grid-column-start property example</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>

Try it Yourself »

Exemple de la propriété grid-column-start avec la valeur "auto" :

Exemple de la propriété grid-column-start avec la valeur "auto" :

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        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: auto;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-start property example</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 class="box8">8</div>
      <div class="box9">9</div>
    </div>
  </body>
</html>

Try it Yourself »

Exemple de la propriété grid-column-start avec la valeur "column-line" :

Exemple de la propriété grid-column-start avec la valeur "column-line" :

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 12px;
        background-color: red;
        padding: 15px;
      }
      .grid-container>div {
        background-color: #dcdcdc;
        text-align: center;
        padding: 20px 0;
        font-size: 35px;
        color: white;
      }
      .box1 {
        grid-column-start: 4;
      }
    </style>
  </head>
  <body>
    <h1> Grid-column-start Property </h1>
    <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>8</div>
      <div>9</div>
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Tester
auto	Une seule colonne sera couverte. Il s'agit de la valeur par défaut de cette propriété.	Tester »
span n	Spécifie le nombre de colonnes que l'élément va couvrir.	Tester »
column-line	Spécifie la ligne de grille à partir de laquelle l'élément doit commencer.	Tester »

Pratique

Que fait la propriété CSS grid-column-start ?

Elle indique au navigateur où commencer la colonne dans une mise en page en grille.Elle spécifie l'adresse e-mail de l'expéditeur dans un formulaire de contact.Elle définit l'encodage des caractères pour le document HTML.Elle détermine la largeur d'une bordure dans une mise en page en grille.Elle détermine où un élément est placé dans une mise en page en grille.

Propriété CSS grid-column-start ​

Syntaxe ​

Exemple de la propriété grid-column-start : ​

Résultat ​

Exemple de la propriété grid-column-start spécifiée comme "span 2" : ​

Exemple de la propriété grid-column-start avec la valeur "auto" : ​

Exemple de la propriété grid-column-start avec la valeur "column-line" : ​

Valeurs ​

Pratique ​

Propriété CSS grid-column-start

Syntaxe

Exemple de la propriété grid-column-start :

Résultat

Exemple de la propriété grid-column-start spécifiée comme "span 2" :

Exemple de la propriété grid-column-start avec la valeur "auto" :

Exemple de la propriété grid-column-start avec la valeur "column-line" :

Valeurs

Pratique