Le module de modèle de grille CSS (CSS Grid Layout Module) est un outil puissant pour créer des mises en page en 2D pour le web. Il permet aux développeurs de créer des grilles complexes avec une syntaxe simple et intuitive. Voici comment vous pouvez commencer à l’utiliser:
1. Définir un élément comme une grille:
La première étape pour créer une grille est de définir un conteneur comme une grille:
```
.container {
display: grid;
}
```
1. Définir les colonnes et les rangées de la grille:
Vous pouvez utiliser les propriétés `grid-template-columns` et `grid-template-rows` pour définir la structure de votre grille. Par exemple, si vous voulez une grille avec trois colonnes de même largeur, vous pouvez utiliser le code suivant:
```
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
```
Pour définir les lignes, vous pouvez faire:
```
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px;
}
```
1. Placer les éléments sur la grille:
Ensuite, vous pouvez placer les enfants de la grille sur la grille à l’aide de `grid-column-start`, `grid-column-end`, `grid-row-start`, `grid-row-end` etc. Par exemple:
```
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
```
1. Utiliser des modèles de zones de grille:
Un autre moyen de positionner des éléments est de utiliser le modèle des zones de grille. Vous pouvez nommer les zones de votre grille et placer des éléments en leur attribuant le nom de la zone:
```
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px;
grid-template-areas:
“header header header“
“main main sidebar“
}
.header {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
```
En plus de ces fonctionnalités de base, le module de modèle de grille CSS offre également des outils pour aligner et justifier les éléments, contrôler l’espace entre les éléments de la grille et bien plus encore.
