grid-column-start

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

La propriété grid-column-start définit la position du début d'un élément au sein de la grille de façon automatique, absolue ou relative par rapport à la fin de l'élément. La position de début définit le bord de la zone de grille selon l'axe logique de bloc (celui orthogonal au sens de lecteur).

Exemple interactif

Syntaxe

css

/* Valeur avec un mot-clé */
grid-column-start: auto;

/* Valeur <custom-ident> */
grid-column-start: unezonedegrille;

/* Valeurs <integer> + <custom-ident> */
grid-column-start: 2;
grid-column-start: unezonedegrille 4;

/* Valeurs span + <integer> + <custom-ident> */
grid-column-start: span 3;
grid-column-start: span unezonedegrille;
grid-column-start: span unezonedegrille 5;

/* Valeurs globales */
grid-column-start: inherit;
grid-column-start: initial;
grid-column-start: revert;
grid-column-start: revert-layer;
grid-column-start: unset;

La valeur de cette propriété prend la forme d'une seule valeur <grid-line>. Une telle valeur peut être définie avec :

le mot-clé auto
un identifiant (<custom-ident>)
ou une valeur entière (<integer>)
ou un identifiant et un entier séparés par un espace
ou le mot-clé span avec un identifiant ou un entier ou les deux.

Valeurs

auto

Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (span) automatique ou une taille par défaut de 1.

<custom-ident>

S'il existe une ligne nommée avec '<custom-ident>-start', le début de l'élément coincide avec la première ligne correspondante.

Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-column-start: toto; cela sélectionnera le bord de la zone de grille nommée correspondante (sauf si une autre ligne toto-start a explicitement été déclarée).

Sinon, la valeur est traitée comme si on avait utilisé <custom-ident> et la valeur 1.

<integer> && <custom-ident>?

Le début de l'élément est placé sur la n-ième ligne de la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.

Si un nom est fourni pour <custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront considérées afin de trouver la position.

Une valeur entière de 0 sera considérée comme invalide.

span && [ <integer> || <custom-ident> ]

Le début de l'élément est placé relativement au bord de fin pour occuper n colonnes.

Si un nom fourni pour <custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, toutes les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées pour l'étendue de l'élément.

Si l'entier n'est pas défini, la valeur par défaut sera 1. Les entiers négatifs ou nuls sont invalides.

<custom-ident> ne peut pas prendre la valeur span.

Définition formelle

Valeur initiale	`auto`
Applicabilité	éléments de grilles et boîtes positionnées de façon absolue dont le bloc englobant est un conteneur de grille
Héritée	non
Valeur calculée	comme spécifié
Type d'animation	discrète

Syntaxe formelle

grid-column-start = 
  <grid-line>  

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

Exemples

Définir la colonne de début pour un élément de grille

HTML

html

<div class="wrapper">
  <div class="box1">Un</div>
  <div class="box2">Deux</div>
  <div class="box3">Trois</div>
  <div class="box4">Quatre</div>
  <div class="box5">Cinq</div>
</div>

CSS

css

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: span 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}

Résultat

Placement relatif aux lignes

HTML

html

<div class="wrapper">
  <div class="box1">Un</div>
  <div class="box2">Deux</div>
  <div class="box3">Trois</div>
  <div class="box4">Quatre</div>
  <div class="box5">Cinq</div>
</div>

CSS

css

.wrapper {
  display: grid;
  grid-template-columns: [main-start] 2fr [main] 1fr [main] 1fr [inter] 1fr [main];
}

.box1 {
  grid-column-start: span 2 main;
  grid-column-end: 5;
}

.box2 {
  grid-column-start: span 2 main;
  grid-column-end: inter;
}

.box3 {
  grid-column-start: span 2 main;
  grid-column-end: main;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}

Résultat

Spécifications

Specification
CSS Grid Layout Module Level 2 # line-placement

Compatibilité des navigateurs

BCD tables only load in the browser