Découvrez toutes les possibilités de la propriété grid-column en CSS
La propriété CSS grid-column permet de spécifier comment un élément doit être placé sur une grille de mise en page Créez des mises en page élaborées avec grid-column et la grille de mise en page en CSS
Définition et utilisation de la propriété css grid-column
La propriété CSS grid-column permet de définir la position d'un élément dans une grille CSS. Elle peut être utilisée pour spécifier où l'élément doit être placé dans la grille en termes de lignes et de colonnes.
Pour utiliser la propriété grid-column, vous devez d'abord créer une grille en utilisant la propriété display: grid sur un élément parent. Vous pouvez alors utiliser la propriété grid-template-columns pour définir le nombre de colonnes de la grille et leur largeur.
Voici un exemple de code qui crée une grille avec deux colonnes de largeur égale :
La propriété grid-column peut être combinée avec d'autres propriétés de grille, comme grid-row et grid-area, pour contrôler la position et la taille de l'élément dans la grille. La Syntaxe CSS
oici la syntaxe générale de la propriété CSS grid-column :
grid-column: / ;
Où et sont des valeurs numériques qui indiquent les lignes de début et de fin de l'élément sur la grille.
Voici quelques exemples d'utilisation de grid-column :
Pour faire en sorte que l'élément s'étende sur toutes les colonnes de la grille :
grid-column: 1 / -1;
Pour faire en sorte que l'élément s'étende sur les deux premières colonnes de la grille :
grid-column: 1 / 3;
Pour faire en sorte que l'élément s'étende sur la deuxième colonne de la grille :
grid-column: 2 / 2;
Vous pouvez également utiliser des noms de lignes ou de colonnes définis précédemment dans la feuille de style. Par exemple :
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
Explorateur
Verssion
57
16
52
10
44
Voici un exemple de code HTML et CSS qui utilise la propriété grid-column pour créer une grille avec deux colonnes de largeur égale et pour placer différents éléments dans des colonnes spécifiques :
Ce code créera une grille avec deux colonnes de largeur égale. L'élément 1 sera placé dans la première colonne, l'élément 2 sera placé dans la seconde colonne et l'élément 3 sera placé sur les deux colonnes. L'élément 4 sera décalé d'une colonne vers la droite et sera placé sur la deuxième colonne.
La propriété grid-column accepte plusieurs valeurs qui permettent de définir la position d'un élément dans une grille de manière plus précise.
Voici quelques exemples de valeurs que vous pouvez utiliser avec grid-column :
Colonnes fractionnaires (fr) : Vous pouvez utiliser la valeur fr pour définir la largeur d'une colonne en termes de fractions de la grille. Par exemple, pour créer une grille avec deux colonnes de largeur égale, vous pouvez utiliser la valeur 1fr 1fr pour grid-template-columns.
Valeurs en pixels (px) : Vous pouvez utiliser la valeur px pour définir la largeur d'une colonne en pixels. Par exemple, pour créer une grille avec deux colonnes de largeur fixe de 100 pixels, vous pouvez utiliser la valeur 100px 100px pour grid-template-columns.
Valeurs en pourcentage (%) : Vous pouvez utiliser la valeur % pour définir la largeur d'une colonne en pourcentage de la largeur de la grille parente. Par exemple, pour créer une grille avec deux colonnes de largeur égale qui occupent chacune 50% de la largeur de la grille, vous pouvez utiliser la valeur 50% 50% pour grid-template-columns.
Valeurs négatives : Vous pouvez utiliser des valeurs négatives avec grid-column pour décaler un élément vers la gauche ou vers le haut de la grille. Par exemple, pour décaler un élément d'une colonne vers la gauche, vous pouvez utiliser la valeur -1 / 1 pour grid-column.
Voici un exemple de code qui utilise plusieurs de ces valeurs avec grid-column :
Ce code créera une grille avec trois colonnes de largeur différente : la première colonne occupera 1 fraction de la largeur de la grille, la deuxième colonne sera de 200 pixels de large et la troisième colonne occupera 50% de la largeur de la grille. L'élément 4 sera décalé d'une colonne vers la gauche et sera placé sur la première colonne.