CSS Grid Layout (ou Grid CSS) est une technique d’agencement d’interface utilisateur en 2D qui permet de diviser l’espace d’affichage en colonnes et lignes pouvant accueillir des éléments. Elle offre une grande souplesse de disposition et est devenue un outil indispensable pour tous les développeurs web.
Voici comment utiliser CSS Grid Layout de manière basique :
1. Définition d’un conteneur de grille :
Pour commencer à utiliser Grid CSS, vous devez définir un conteneur de grille en utilisant la propriété `display : grid ;` sur un élément.
```
.container {
display: grid;
}
```
1. Création de colonnes et de lignes :
Vous pouvez ensuite utiliser les propriétés `grid-template-columns` et `grid-template-rows` pour définir la taille des colonnes et des lignes de votre grille.
```
.container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
}
```
Dans cet exemple, votre grille se compose de deux colonnes et deux lignes, chaque colonne et chaque ligne occupant 50% de l’espace disponible.
1. Placement des éléments :
Chaque élément enfant de votre conteneur de grille peut être placé où vous le souhaitez dans la grille. Vous pouvez utiliser `grid-column` et `grid-row` pour cela.
```
.item1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.item2 {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.item3 {
grid-column: 1 / 3;
grid-row: 2 / 3;
}
```
Dans cet exemple, `item1` occupe la première colonne et la première ligne, ‘item2’ se situe dans la deuxième colonne et la première ligne, puis ‘item3’ s’étend sur les deux colonnes de la deuxième ligne.
Ceci n’est qu’une introduction de base à CSS Grid Layout. Il est capable de beaucoup de complexité et de flexibilité, et vous pouvez contrôler l’espacement, le superposition, l’alignement et bien d’autres aspects de la disposition.
