Mise en place d'une grille avec la propriété grid-area : exemples et astuces
La propriété CSS grid-area est utilisée pour définir l'emplacement d'un élément de grille dans une grille à plusieurs dimensions. Elle peut être utilisée pour définir l'emplacement d'un élément de grille sur une grille existante ou pour créer une nouvelle grille à l'intérieur d'un élément de grille existant.
Pour utiliser la propriété grid-area, vous devez d'abord définir un élément de grille à l'aide de la propriété display: grid ou display: inline-grid. Vous pouvez ensuite utiliser la propriété grid-area pour définir l'emplacement d'un élément de grille sur la grille.
La Syntaxe CSS grid-area
grid-area: <ligne de départ> / <colonne de départ> / <ligne de fin> / <colonne de fin>;
Chaque valeur représente l'emplacement d'un élément de grille sur la grille. La ligne de départ et la colonne de départ définissent le coin supérieur gauche de l'élément de grille, tandis que la ligne de fin et la colonne de fin définissent le coin inférieur droit de l'élément de grille.
Vous pouvez également utiliser des noms de ligne et de colonne pour définir l'emplacement d'un élément de grille sur la grille. Pour ce faire, vous devez d'abord définir des noms de ligne et de colonne à l'aide de la propriété grid-template-rows et grid-template-columns, comme ceci :
Puis, vous pouvez utiliser la syntaxe suivante pour définir l'emplacement d'un élément de grille sur la grille en utilisant les noms de ligne et de colonne :
grid-area: <nom de ligne de départ> / <nom de colonne de départ> / <nom de ligne de fin> / <nom de colonne de fin>;
Dans cet exemple, nous avons défini une grille à trois colonnes et trois lignes à l'aide de la propriété grid-template-columns et grid-template-rows. Nous avons ensuite utilisé la propriété grid-area pour définir l'emplacement des éléments item1, item2 et item3 sur la grille.
Valeurs de la propriété css grid-area
grid-row-start :
Spécifie la ligne sur laquelle l'élément doit commencer à être affiché. grid-column-start :
Spécifie la colonne dans laquelle l'élément doit commencer à être affiché. grid-row-end :
Indique sur quelle ligne il faut arrêter d'afficher l'élément, ou le nombre de lignes à couvrir. grid-column-end :
Indique sur quelle ligne de colonne il faut arrêter d'afficher l'élément, ou le nombre de colonnes à couvrir. itemname Spécifie un nom pour l'élément de la grille
Objet regexp javascript : Les expressions régulières sont des modèles utilisés pour vérifier des combinaisons de caractère dans les chaînes de caractères.