Propriété CSS grid-column-start

La propriété CSS grid-column-start définit la ligne de colonne où un élément de grille commence — son bord inline-start. Combinée avec grid-column-end, elle détermine combien de colonnes l'élément occupe et où il se positionne. Ces deux propriétés s'écrivent généralement avec le raccourci grid-column : grid-column: <start> / <end>.

Utilisez grid-column-start lorsque vous avez besoin d'un placement explicite dans une mise en page CSS Grid — par exemple, pour faire s'étirer une bannière hero à partir de la deuxième colonne, ou pour pousser une barre latérale vers une piste spécifique indépendamment de l'ordre source.

Numérotation des lignes de grille : dans une grille de quatre colonnes, il existe cinq lignes verticales, numérotées de 1 à 5 depuis le bord inline-start. Vous pouvez également utiliser des nombres négatifs : -1 désigne la dernière ligne, -2 l'avant-dernière, et ainsi de suite.


Valeur initiale	`auto`
S'applique à	Éléments de grille
Héritage	Non
Animable	Oui — la ligne de départ est animable
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	`object.style.gridColumnStart = "2"`

Syntaxe

grid-column-start: auto | <integer> | <name> | span <n> | initial | inherit;

auto — le navigateur place l'élément en utilisant le placement automatique (par défaut).
<integer> — un numéro de ligne de grille, par ex. 2 ou -1.
<name> — une ligne nommée définie dans grid-template-columns.
span <n> — l'élément s'étend sur n pistes de colonnes depuis l'endroit où il est placé.

Valeurs

Valeur	Description
`auto`	Par défaut. L'élément suit le placement automatique normal et occupe une colonne.
`<integer>`	Un numéro de ligne positif ou négatif. Les valeurs négatives comptent depuis la fin de la grille explicite.
`<name>`	Le nom d'une ligne de grille, par ex. `main-start` définie via `[main-start]` dans `grid-template-columns`.
`span <n>`	S'étend sur `n` pistes de colonnes. Contrairement à un numéro de ligne, cela ne fixe pas la position de départ de l'élément.
`initial`	Réinitialise la propriété à sa valeur initiale (`auto`).
`inherit`	Hérite la valeur de l'élément parent.

Exemples

Placer un élément sur une ligne spécifique

Définir grid-column-start: 2 place le premier élément de sorte que son bord gauche s'aligne avec la deuxième ligne verticale de la grille, le poussant dans le deuxième emplacement de colonne.

<!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: 6 — implicit column created</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>

Essayez vous-même »

Le modèle ne définissant que quatre colonnes (lignes 1–5), demander à box1 de commencer à la ligne 6 oblige le navigateur à créer des colonnes implicites (lignes 5 et 6) pour l'accueillir. Il s'agit d'un piège courant — vérifiez toujours que votre numéro de ligne reste dans la grille explicite, sauf si vous souhaitez intentionnellement des pistes implicites.

![Propriété grid-column-start](/uploads/media/default/0001/03/52b22b9f4f2b6f8f1d65a6fb309fe3ee15e77b77.png "Grid-column-start property" =420x)

Étendre des colonnes avec `span`

Utiliser span 2 indique à l'élément d'occuper deux pistes de colonnes depuis l'endroit où le placement automatique le positionne. Contrairement à un numéro de ligne, span est relatif — la position de départ exacte de l'élément reste déterminée par le placement automatique.

<!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: span 2</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>

Essayez vous-même »

C'est la forme la plus lisible lorsque vous vous souciez de la largeur en colonnes d'un élément mais pas de sa position exacte. Pour à la fois fixer la position et contrôler la largeur, combinez grid-column-start avec grid-column-end, ou utilisez le raccourci grid-column.

Placement automatique par défaut

Lorsque la valeur est auto (par défaut), l'élément s'insère dans la prochaine cellule disponible selon l'algorithme de grid auto-flow. Les éléments remplissent la grille ligne par ligne.

<!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: auto (default)</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>

Essayez vous-même »

Ancrage à la colonne 4

grid-column-start: 4 ancre le bord gauche du premier élément à la quatrième ligne verticale. Les éléments restants remplissent les colonnes précédentes par placement automatique.

<!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>
    <h2>grid-column-start: 4</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>8</div>
      <div>9</div>
    </div>
  </body>
</html>

Essayez vous-même »

Modèles courants et pièges

Combiner start et end pour un placement précis

Pour un contrôle total du placement, associez grid-column-start à grid-column-end. Le raccourci grid-column est la façon la plus concise de procéder :

/* Place item from column line 2 to column line 4 (spans 2 tracks) */
.item {
  grid-column: 2 / 4;
  /* equivalent to: */
  /* grid-column-start: 2; */
  /* grid-column-end: 4; */
}

Utiliser des numéros de ligne négatifs

Les entiers négatifs comptent depuis la fin de la grille explicite. -1 désigne la dernière ligne de la grille explicite, ce qui permet facilement d'étirer un élément jusqu'au bord opposé sans connaître le nombre de colonnes :

/* Full-width banner across all explicit columns */
.banner {
  grid-column-start: 1;
  grid-column-end: -1;
}

Cela est équivalent à grid-column: 1 / -1. Notez que les nombres négatifs n'adressent que les lignes de la grille explicite (définie par grid-template-columns) ; ils n'atteignent pas les colonnes implicites créées par débordement.

Lignes nommées

Lorsque vous définissez des lignes nommées dans grid-template-columns, vous pouvez les référencer par nom plutôt que par numéro. Cela rend les mises en page auto-documentées :

.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
}

.sidebar {
  grid-column-start: sidebar-start;  /* or just: grid-column-start: 1 */
}

.main {
  grid-column-start: content-start;  /* or: grid-column-start: 2 */
}

Les lignes nommées sont particulièrement utiles dans les grands composants de mise en page réutilisables où les numéros de colonnes peuvent changer.

Interaction entre l'élément et le placement automatique

Lorsque grid-column-start est défini sur une ligne explicite, le placement automatique des éléments suivants reprend depuis la prochaine cellule disponible après l'élément placé explicitement. Cela peut laisser des espaces vides si aucun élément ne les comble — utilisez grid-auto-flow: dense pour remplir automatiquement ces espaces.

Propriétés associées

grid-column-end — définit la ligne où l'élément se termine.
grid-column — raccourci pour grid-column-start et grid-column-end.
grid-row-start — l'équivalent de cette propriété sur l'axe des rangées.
grid-row — raccourci pour grid-row-start et grid-row-end.
grid-area — raccourci qui définit simultanément le début et la fin de la rangée et de la colonne.
grid-template-columns — définit les colonnes et les lignes nommées que cette propriété référence.
grid-auto-flow — contrôle la façon dont les éléments placés automatiquement remplissent la grille, affectant le comportement des espaces vides.

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 du document HTML.Elle détermine la largeur d'une bordure dans une mise en page en grille.Elle détermine l'emplacement d'un élément dans une mise en page en grille.

Syntaxe

Valeurs

Exemples

Placer un élément sur une ligne spécifique

Étendre des colonnes avec span

Placement automatique par défaut

Ancrage à la colonne 4

Modèles courants et pièges

Combiner start et end pour un placement précis

Utiliser des numéros de ligne négatifs

Lignes nommées

Interaction entre l'élément et le placement automatique

Propriétés associées

Pratique

Étendre des colonnes avec `span`