La propriété CSS grid-column est une abréviation qui permet de spécifier en une seule déclaration les lignes de grille (grid line) de colonne déterminant le positionnement de départ et d'arrivée d'un élément de grille (grid item) dans un layout de grille.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-item:nth-child(2) {
  grid-column: 3 / 5; 

  /* Commence à la 3e ligne de colonne et s'arrête à la 5e ligne de colonne */
}

En raison du comportement de placement automatique par défaut de la grille CSS, le deuxième élément enfant de la grille dans cet exemple devrait normalement être placé dans la deuxième colonne de la première ligne de la grille. Mais comme nous avons déclaré grid-column et l'avons paramétré pour aligner le point de départ de l'élément de la grille sur la troisième ligne de la grille et son point d'arrivée sur la cinquième ligne de la grille, l'élément s'étend sur les troisième et quatrième colonnes au lieu d'une seule colonne.

Syntaxe

grid-column: <grid-line> [ / <grid-line> ]?

Définition complète

<grid-line> =
  auto |
  <custom-ident> |
  [ [ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>? ] |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

Cette propriété peut prendre deux valeurs séparées par une barre oblique (/). La valeur précédant la barre oblique définit la propriété grid-column-start, tandis que la valeur suivant la barre oblique définit la propriété grid-column-end. Vous pouvez aussi ne déclarer qu'une seule valeur, sans la barre oblique, qui s'appliquera à la propriété grid-column-start, et dans ce cas la propriété grid-column-end sera définie à auto.

Valeurs

/* Keyword value */
grid-column: auto;

/* <custom-ident> value */
grid-column: myLineName;
grid-column: myGridArea;
grid-column: sidebar-start / main-end;

/* <integer> + <custom-ident> values */
grid-column: 3;
grid-column: 2 / -3;
grid-column: main 2;
grid-column: 3 line / 5 line;

/* span + <integer> + <custom-ident> values */
grid-column: span 3;
grid-column: span 2 / 5;
grid-column: 1 / span myline;
grid-column: 2 / span gridline 3;

/* Global values */
grid-column: inherit;
grid-column: initial; /* same as `auto` */
grid-column: revert;
grid-column: revert-layer;
grid-column: unset;

auto

Il s'agit de la valeur par défaut. Elle indique l'étendue (span) par défaut (1) et le comportement de placement automatique : l'élément de la grille sera automatiquement placé dans la prochaine cellule vide disponible.

Cette syntaxe vous permet d'utiliser soit un nombre entier pour faire référence à une ligne de grille numérotée, soit une chaîne de caractères pour faire référence à une ligne de grille nommée ou à une zone de grille nommée. En d'autres termes, vous pouvez spécifier une ligne de grille par son index numérique ou par son nom pour le bord de départ et le bord d'arrivée d'un élément de la grille.

Positionnement des éléments par numéro de ligne

Chaque piste de la grille (grid track) est précédée et suivie d'une ligne de grille, et chacune a un indice numérique qui lui est attribué automatiquement, en commençant par le numéro un.

Dans le premier exemple de cet article, nous avons utilisé cette syntaxe pour désigner la troisième ligne de colonne de la grille par son indice (3), ce qui aligne le bord initial de l'élément de la grille sur le bord initial de la troisième colonne, tandis que son bord final est aligné sur la cinquième colonne à l'aide de la syntaxe :

.grid-item:nth-child(2) {
  grid-column: 3 / 5;
}

Notez que vous pouvez également utiliser un nombre négatif pour faire référence à une ligne de la grille, mais il compte à partir du bord final de la grille. Le code suivant indique les mêmes lignes de la grille que dans l'exemple précédent, mais en comptant à l'envers :

.grid-item:nth-child(2) {
  grid-column: -3 / -1; 
  
  /* même chose que : grid-column: 3 / 5; */
}

Remarquez comment les nombres entiers négatifs sont assignés à notre grille, de même que les nombres positifs :

Positionnement des éléments par nom de ligne

Vous pouvez également attribuer un nom personnalisé à une ligne de la grille pour faire référence à cette ligne par son nom.

Reprenons notre exemple et nommons toutes ses lignes de suivi des colonnes comme suit :

.grid {
  display: grid;
  grid-template-columns: [first] 1fr [second] 1fr [third] 1fr [fourth] 1fr [last];  
}

Nous pouvons nous référer à la troisième et à la cinquième ligne par un identifiant personnalisé plutôt que par leur index :

.grid-item:nth-child(2) {
  grid-column: third / last; 
  
  /* même chose que les index 3 / 5 */
}

Il est à noter que l'identifiant personnalisé (custom-ident) ne peut pas prendre la valeur span. span est un mot-clé réservé aux propriétés de placement de la grille (par exemple, grid-column : 1 / span 2) comme nous le verrons plus loin.

Positionnement des éléments avec grid-template-areas

Lorsque vous définissez des zones de grille à l'aide de la propriété grid-template-areas, vous obtenez des noms de ligne implicites basés sur le nom des zones. Par exemple, une zone de grille portant le nom "content" (contenu) génère une ligne nommée "content-start" avant elle et une autre nommée "content-end" après elle. Vous pouvez vous référer à ces lignes pour définir la position d'un élément de la grille.

.grid-item:nth-child(2) {
  grid-column: content-start / content-end;
}

Vous pouvez également vous référer au nom de la zone pour positionner un élément à la ligne de début et de fin de la zone de contenu nommée :

.grid-item:nth-child(2) {
  grid-column: content;
}

Voici un exemple complet :

<body>
  <main></main>
  <aside></aside>
</body>

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   
  grid-template-areas: "content content sidebar";
}

main {
  grid-column: content;
}

Ce CSS permet de positionner l'élément <main> dans la zone de contenu de notre grille.

integer & custom-ident ?

Cette syntaxe vous permet de positionner les éléments de la grille par rapport aux lignes de la grille lorsque les noms sont répétés. Si plusieurs lignes de la grille portent le même nom, cette syntaxe permet de préciser à laquelle de ces lignes vous faites référence.

.grid {
  display: grid;
  grid-template-columns: [bar] 1fr [foo] 1fr [bar] 300px [bar];

  /*
    La fonction repeat() permet de répéter des lignes de grille nommées, par exemple :

    grid-template-columns: repeat(3, [bar] 1fr);
  */
}

Supposons que vous souhaitiez choisir la troisième ligne, mais que cette ligne porte le même nom que la première et la dernière ligne de la grille - elles s'appellent toutes bar. Puisque la deuxième ligne nommée bar est la troisième ligne de la grille, vous pouvez utiliser 2 pour la sélectionner comme point de départ :

.grid-item:nth-child(2) {
  grid-column: 2 bar; /* La 2e ligne `bar` est la 3e ligne */

  /* Ce qui est l'équivalent de : */
  grid-column-start: 2 bar;  
  grid-column-end: auto;  
}

Notez que l'ordre n'a pas d'importance, de sorte que le code précédent peut également être écrit de cette manière :

.grid-item:nth-child(2) {
  grid-column: bar 2;
}

Comme pour la syntaxe précédente, vous pouvez utiliser un nombre entier négatif pour compter les lignes de la grille à partir du bord final de la grille. Dans notre exemple, si nous voulons nous référer au premier bar, nous pouvons compter à partir du bord final de notre grille et l'écrire comme suit :

.grid-item:nth-child(2) {
  grid-column: -3 bar;
}

Attention : la valeur entière ne peut pas être zéro.

span && [ || ]

Cette syntaxe permet à un élément de la grille de s'étendre sur les pistes de la grille. Elle peut être spécifiée de trois manières différentes.

Notez que si l'entier n'est spécifié nulle part dans cette syntaxe, la valeur par défaut est 1.

span integer

L'utilisation du mot-clé span suivi d'un nombre entier indique le nombre de pistes qu'un élément de grille couvre à partir d'une ligne de grille spécifique. Par exemple, si nous voulons qu'un élément de grille s'étende sur trois pistes de colonne vers son bord final, nous pouvons appliquer la valeur suivante :

.grid-item:nth-child(2) {
  grid-column: auto / span 3;
}

span custom-ident

Il est également possible de combiner le mot-clé span avec le nom d'une ligne de la grille pour que l'élément de la grille s'étende jusqu'à ce qu'il atteigne la ligne spécifiée.

.grid-item:nth-child(3) {
  grid-column: 3 / span lastline;
}

Puisque la ligne de départ de l'élément de grille est connue (3), nous pouvons étendre l'élément jusqu'à ce qu'il atteigne une ligne de la grille nommée lastline.

span custom-ident integer

Si le nom de la ligne de grille spécifiée est attribué à plus d'une ligne de colonne de grille - en d'autres termes, si nous avons plusieurs lignes de colonne de grille nommées - nous devons indiquer celles que nous voulons cibler. Pour ce faire, nous pouvons ajouter un nombre entier à notre valeur en précisant la ligne de grille à laquelle nous nous référons.

Prenons l'exemple de la grille suivante :

.grid-container {
  display: grid;
  grid-template-columns: [y] 1fr [x] 1fr [x] 1fr [y] 1fr [x] 1fr [x];
}

.grid-item:nth-child(3) {
  grid-column: 2 /span x 2;
}

Nous fixons la ligne de départ de l'élément de grille à la deuxième ligne. Ensuite, nous voulons qu'il s'étende vers la droite jusqu'à ce qu'il atteigne une ligne de la grille nommée x. Et comme nous voulons qu'il aille jusqu'à la deuxième ligne de colonne x (sans compter la ligne de départ), nous obtenons span x 2.

Notre élément de grille s'étend à partir de la deuxième ligne, comme illustré ci-dessous. La première ligne de colonne qu'il atteint est nommée x, elle est suivie d'une ligne nommée y, et enfin, il atteint la deuxième ligne x souhaitée.

Cette syntaxe est utile lorsque vous souhaitez étendre un élément de la grille vers une ligne de la grille en utilisant son nom. Mais comme il y a plus d'une ligne de grille portant ce nom, nous ajoutons un entier pour dire que nous voulons le n-ième rencontré.

Voir grid-column-start et grid-column-end pour plus d'informations et des exemples de la syntaxe de ces propriétés individuelles.

Exemples

Examinons quelques scénarios différents dans lesquels la colonne de grille peut être utilisée.

Mise en page avec un élément étendu

Imaginons que nous voulions que notre texte soit réduit et centré, mais qu'un élément tel qu'une image ou une vidéo s'étende d'un bord à l'autre de la fenêtre de visualisation.

Prenons le HTML suivant :

<article>
  <h1></h1>
  <p></p>
  <img src="bridge.webp" alt="A brightly-lot floating bridge against the night sky.">
  <p></p>
</article>

Pour créer cette mise en page à l'aide de CSS Grid, nous avons mis en place une grille à trois colonnes :

article {
  display: grid;
  grid-template-columns: 1fr min(60ch, 100%) 1fr;
}

Nous devons maintenant placer tous les enfants de l'<article> dans la deuxième colonne et aligner le bord initial de l'<img> sur la première ligne de la grille et son bord final sur la dernière ligne :

article > * {
  grid-column: 2 / 3;
}
article > img {
  grid-column: 1 / -1;
}

Voici le résultat :

Le CSS complet :

.content {
  display: grid;
  grid-template-columns: 1fr min(60ch, 100%) 1fr;
}
.content > * {
  grid-column: 2 / 3;
}
.full-bleed {
  grid-column: 1 / -1;
}

Empiler des éléments de la grille

Lorsque l'on positionne des éléments dans la grille, il est possible de les empiler ou de les faire se chevaucher. Cela nous permet parfois d'utiliser la grille CSS comme alternative au positionnement absolu. Par exemple, nous pouvons placer un calque de légende au-dessus d'une image sans utiliser la propriété de position, comme illustré ci-dessous :

<figure>
  <img src="image.png" alt="Quoi ? le texte alternatif est vide ??">
  <figcaption>La légende de notre image</figcaption>
</figure>

figure {
  display: grid;
}

img,
figcaption {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

On obtient ceci :

Par défaut, les éléments de la grille s'empilent dans l'ordre de la source, mais vous pouvez contrôler leur niveau à l'aide de la propriété z-index. Dans l'exemple suivant, certains éléments se chevauchent et nous utilisons la propriété z-index pour placer le deuxième élément au niveau le plus élevé dans le contexte d'empilement :

.item:nth-child(2) {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  z-index: 1;
}

Accessibilité

Une chose à noter lors de l'utilisation des propriétés de placement de la grille est le problème causé par le réarrangement des éléments. Lorsque vous modifiez la position d'un élément, seul l'ordre visuel des éléments de la grille change, et cet ordre peut être différent de l'ordre original du document. Cela peut entraîner une très mauvaise expérience pour une personne qui parcourt le document à l'aide d'un clavier ou qui écoute un lecteur d'écran, qui lit le contenu dans le même ordre que le code HTML.

Il faut donc éviter de modifier l'ordre des éléments de la grille lorsque l'ordre HTML des éléments est important. Par exemple, cela peut être intéressant pour une galerie d'images aléatoires, mais peut-être pas autant pour les entrées de votre formulaire.

Toutefois, à l'heure où nous écrivons ces lignes, il existe une proposition visant à résoudre ce problème qui, nous l'espérons, sera résolu à l'avenir.

Démo

Vous pouvez modifier la valeur des propriétés de placement de la grille dans la démo pour voir ce qu'il advient du troisième élément de la grille :

voir Grid item placement with shorthands de seyedi dans CodePen