Propriété grid-column-start

La propriété grid-column-start définit la position de départ d'un élément dans la grille selon les colonnes. La valeur de la propriété peut être un nombre positif ou négatif. Si nous spécifions un nombre positif, la position de départ de l'élément est comptée de gauche à droite. En indiquant un nombre négatif, l'élément sera positionné dans l'ordre inverse, c'est-à-dire de droite à gauche.

Syntaxe

sélecteur {
	grid-column-start: nombre positif ou négatif;
}

Exemple

Définissons les positions de départ des éléments dans la grille :

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
}
#elem2 {
	grid-column-start: 2;
}
#elem3 {
	grid-column-start: 3;
}

Exemple

Maintenant, spécifions des nombres négatifs dans la propriété grid-column-start :

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: -1;
}
#elem2 {
	grid-column-start: -2;
}
#elem3 {
	grid-column-start: -3;
}

Exemple

Maintenant, utilisons la propriété grid-column-end pour que les premier, deuxième et troisième éléments se positionnent dans la première ligne. Et que le quatrième élément occupe toute la deuxième ligne :

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 3;
	grid-column-end: 4;
}
#elem4 {
	grid-column-start: 1;
	grid-column-end: 4;
}

Exemple

Lorsque les colonnes occupées par des éléments voisins se chevauchent, chaque élément suivant est décalé d'une ligne vers le bas. Profitons de cette possibilité pour faire en sorte que le premier élément se place dans la première ligne, le deuxième - dans la deuxième, et que les troisième et quatrième - occupent la troisième ligne :

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
	grid-column-end: 4;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem4 {
	grid-column-start: 3;
	grid-column-end: 4;
}

Voir aussi

la propriété grid-column-end,
qui définit la position finale de l'élément dans la grille selon les colonnes
la propriété grid-column,
qui définit les positions de départ et de fin de l'élément dans la grille selon les colonnes
la propriété grid-template-columns,
qui définit le nombre et la largeur des colonnes dans la grille
la propriété grid-auto-columns,
qui définit le nombre et la largeur des colonnes dans la grille implicite