Propriété grid-column

La propriété grid-column définit les positions de début et de fin d'un élément dans la grille selon les colonnes. Les valeurs de la propriété peuvent être des nombres positifs ou négatifs, indiqués par une barre oblique. Le premier nombre désigne la position de début de l'élément, le second - la position de fin.

Si une valeur positive est spécifiée, la position de l'élément est comptée de gauche à droite. Si un nombre négatif est indiqué, l'élément sera positionné dans l'ordre inverse, c'est-à-dire de droite à gauche.

Syntaxe

sélecteur {
	grid-column: position de début / position de fin;
}

Exemple

Définissons les positions de début et de fin 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: 1 / 2;
}
#elem2 {
	grid-column: 1 / 3;
}
#elem3 {
	grid-column: 1 / 4;
}

Exemple

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

<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: 1 / -2;
}
#elem2 {
	grid-column: 1 / -3;
}
#elem3 {
	grid-column: 1 / -4;
}

Exemple

Maintenant, faisons en sorte que les premier, deuxième et troisième éléments soient positionnés sur 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: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}
#elem4 {
	grid-column: 1 / 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. Utilisons cette particularité pour positionner le premier élément sur la première ligne, le deuxième - sur la deuxième, et les troisième et quatrième - sur 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: 1 / 4;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 1 / 2;
}
#elem4 {
	grid-column: 3 / 4;
}

Exemple

Combinons les propriétés grid-column et grid-row :

<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;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}

Exemple

Maintenant, faisons en sorte que les premier et cinquième blocs occupent toute la ligne, que le deuxième bloc - deux lignes et deux colonnes, et que les troisième et quatrième blocs - une ligne et deux colonnes :

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

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}
#elem4 {
	grid-row: 3 / 3;
	grid-column: 2 / 4;
}
#elem5 {
	grid-row: 4 / 5;
	grid-column: 1 / 4;
}

Voir aussi

la propriété grid-row,
qui définit les positions de début et de fin d'un élément dans la grille selon les lignes
la propriété grid-column-start,
qui définit la position de début d'un élément dans la grille selon les colonnes
la propriété grid-column-end,
qui définit la position de fin d'un é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