Propriété CSS grid-column – Numéros de ligne, span et noms

La propriété CSS grid-column est un raccourci qui place un élément de grille le long de l'axe horizontal (inline). Elle définit où l'élément commence et où il se termine, ce qui détermine ensemble sa position en colonne et le nombre de colonnes qu'il couvre. Elle regroupe les deux propriétés individuelles :

grid-column-start — la ligne de colonne où l'élément commence.
grid-column-end — la ligne de colonne où l'élément se termine.

Une grille est divisée par des lignes de grille, et grid-column fonctionne en faisant référence à ces lignes plutôt qu'aux cellules entre elles. Dans une grille à quatre colonnes, il y a cinq lignes verticales, numérotées de 1 à 5 de gauche à droite (ou de −5 à −1 en comptant depuis la droite).

Remarque : grid-column contrôle uniquement le placement le long des colonnes. Pour positionner un élément sur des lignes, utilisez grid-row. Pour placer un élément à la fois sur des lignes et des colonnes, utilisez grid-area.


Valeur initiale	`auto / auto`
S'applique à	Éléments de grille
Héritage	Non
Animatable	Oui
Spécification	CSS Grid Layout Level 1
Syntaxe DOM	`object.style.gridColumn = "1 / span 3"`

Syntaxe

/* Two explicit line numbers */
grid-column: <start-line> / <end-line>;

/* Start line + span count */
grid-column: <start-line> / span <number>;

/* Span by named line */
grid-column: span <name>;

/* Single value (sets start; end defaults to auto) */
grid-column: <start-line>;

/* Global keywords */
grid-column: initial | inherit | unset | revert;

Formes de valeur

Il existe quatre façons courantes d'écrire grid-column :

Forme	Exemple	Ce qu'elle fait
Deux numéros de ligne	`2 / 4`	Commence à la ligne 2, se termine à la ligne 4 (couvre les colonnes 2–3)
Début + nombre de colonnes	`2 / span 2`	Commence à la ligne 2, couvre 2 colonnes vers l'avant
Numéro de ligne négatif	`1 / -1`	S'étend de la première à la toute dernière ligne (pleine largeur)
Lignes nommées	`content-start / content-end`	Utilise les noms définis dans `grid-template-columns`
Valeur unique	`3`	Définit `grid-column-start: 3` ; la fin est `auto` (une colonne)

Lorsque vous écrivez une seule valeur (sans /), seul grid-column-start est défini ; grid-column-end prend la valeur auto par défaut, plaçant l'élément dans une seule piste de colonne.

Numérotation des lignes de grille

Les lignes de grille sont comptées à partir de 1 au bord de début (à gauche dans les mises en page LTR). Vous pouvez également utiliser des nombres négatifs pour compter depuis le bord de fin, de sorte que −1 fait toujours référence à la dernière ligne, quel que soit le nombre de colonnes.

Column tracks:  [  1  ][  2  ][  3  ][  4  ]
Line numbers:  1       2      3      4       5
Negative:     -5      -4     -3     -2      -1

Cela signifie que grid-column: 1 / -1 fait toujours s'étendre un élément sur toute la largeur de la grille explicite, quel que soit le nombre de colonnes.

Exemples

Placer un élément avec des numéros de ligne explicites

La boîte 6 est placée entre les lignes de colonnes 2 et 4, elle couvre donc les colonnes 2 et 3.

<!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: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .box6 {
        grid-column: 2 / 4;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column 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>
  </body>
</html>

Essayez vous-même »

Placer le premier élément avec `1 / 3`

La boîte 1 est placée à grid-column: 1 / 3, ce qui occupe les deux premières pistes de colonnes.

<!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: #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>Grid-column 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>
  </body>
</html>

Essayez vous-même »

Utiliser `span` et un élément pleine largeur avec `1 / -1`

Le mot-clé span est utile lorsque vous savez combien de colonnes couvrir mais pas le numéro de la ligne de fin. Une ligne de fin négative (-1) atteint toujours la dernière ligne de colonne, faisant s'étendre l'élément sur toute la largeur de la grille explicite.

<!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: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #4caf50;
        color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .featured {
        grid-column: 1 / span 2; /* starts at line 1, covers 2 columns */
      }
      .full-width {
        grid-column: 1 / -1; /* spans the whole explicit grid */
      }
    </style>
  </head>
  <body>
    <h2>span and full-width example</h2>
    <div class="grid-container">
      <div class="featured">Featured (2 cols)</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div class="full-width">Full width (1 / -1)</div>
    </div>
  </body>
</html>

Placer des éléments avec des lignes nommées

Vous pouvez nommer les lignes de grille dans grid-template-columns en utilisant la syntaxe des crochets, puis référencer ces noms dans grid-column. Cela rend les mises en page plus lisibles et résistantes aux changements du nombre de colonnes.

<!DOCTYPE html>
<html>
  <head>
    <title>Named grid lines</title>
    <style>
      .grid-container {
        display: grid;
        /* Names the lines around the middle two columns */
        grid-template-columns:
          [full-start] 1fr
          [content-start] 2fr 2fr
          [content-end] 1fr
          [full-end];
        gap: 10px;
        background-color: #eee;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #5c6bc0;
        color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 18px;
      }
      .sidebar {
        grid-column: full-start / content-start; /* first column only */
      }
      .main {
        grid-column: content-start / content-end; /* middle two columns */
      }
      .aside {
        grid-column: content-end / full-end; /* last column only */
      }
    </style>
  </head>
  <body>
    <h2>Named lines example</h2>
    <div class="grid-container">
      <div class="sidebar">Sidebar</div>
      <div class="main">Main content</div>
      <div class="aside">Aside</div>
    </div>
  </body>
</html>

Valeurs

Valeur	Description
`<line-number>`	Un numéro de ligne entier (positif depuis le début, négatif depuis la fin).
`<line-name>`	Un nom personnalisé défini dans `grid-template-columns`.
`span <number>`	Couvre le nombre donné de pistes de colonnes.
`span <name>`	S'étend jusqu'à la prochaine ligne portant le nom donné.
`auto`	Le navigateur place l'élément automatiquement (valeur par défaut).
`initial`	Réinitialise à la valeur par défaut (`auto / auto`).
`inherit`	Hérite de la valeur calculée de l'élément parent.
`unset`	Se comporte comme `inherit` si la propriété est héritée, sinon comme `initial`.

Pièges courants

1 / -1 couvre uniquement la grille explicite. Si des éléments sont placés dans la grille implicite (lignes/colonnes supplémentaires créées automatiquement par le navigateur), une ligne de fin négative ne s'étend pas dans ces pistes. Définissez d'abord la grille complète avec grid-template-columns.
span sans ligne de début. Écrire grid-column: span 3 définit uniquement grid-column-end: span 3 ; le début est auto, donc le navigateur le choisit. C'est valide, mais le placement dépend de l'ordre du flux automatique.
Recherche de lignes nommées. Lorsque vous référencez un nom qui n'existe pas dans le gabarit, le navigateur le traite comme auto. Vérifiez toujours le nom dans grid-template-columns.
Raccourci à valeur unique. grid-column: 3 définit le début à la ligne 3 et la fin à auto — pas à la ligne 4. L'élément occupe exactement une piste de colonne, sauf si la fin placée automatiquement couvre davantage.

Propriétés associées

grid-column-start et grid-column-end — les deux propriétés individuelles que grid-column regroupe.
grid-row — l'équivalent sur l'axe vertical ; même syntaxe, appliquée aux lignes.
grid-area — définit le placement en ligne et en colonne en une seule déclaration.
grid-template-columns — définit les pistes de colonnes et les lignes nommées que grid-column cible.
grid-template-rows — définit les pistes de lignes et les lignes nommées pour grid-row.
grid-auto-columns — contrôle la taille des pistes de colonnes créées implicitement.
grid — le raccourci tout-en-un pour la grille.

Pratique

Quelle est la fonctionnalité de la propriété 'grid-column' en CSS ?

Elle est utilisée pour ajuster le rembourrage des cellules de grille.Elle est utilisée pour aligner le contenu horizontalement à l'intérieur d'une cellule de grille.Elle est utilisée pour déterminer l'emplacement d'un élément de grille et son étendue dans les couloirs horizontaux de la grille.Elle est utilisée pour définir la largeur des cellules de grille.Elle est utilisée pour spécifier une ligne, une étendue ou rien.