Introduction
- Système de mise en page basé sur une grille.
- C'est le tout premier module CSS créé spécifiquement pour résoudre les problèmes de mise en page.
- Fonctionne très bien avec Flexbox
L'élément sur lequel display : grid est appliqué, connu aussi sous le nom de "parent"
Les enfants du conteneur de la grille
Les lignes de séparation qui constituent la structure de la grille.
L'espace entre deux lignes adjacentes et deux colonnes adjacentes de la grille.
L'espace entre deux lignes de grille adjacentes.
L'espace total entouré de quatre lignes de la grille.
Définit les colonnes et les lignes de la grille avec une liste de valeurs séparées par des espaces.
.container__block{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
Ou
.container__block{
display: grid;
grid-template: 1fr 1fr / 1fr 1fr 1fr;
}
Donne à un élément un nom afin qu'il puisse être référencé par un modèle créé avec la propriété grid-template-areas.
.item1 {
grid-area: header;
background-color: red;
grid-area: 1 / 2 / 3 / 2;
}
"grid-area: row-start / column-start /
row-end / column-end;"
Définit un modèle de grille en faisant référence aux noms des zones de la grille qui sont spécifiées avec la propriété grid-area.
.item1 {
grid-area: header;
background-color: red;
}
.item2 {
grid-area: side;
background-color: orange;
}
.item3 {
grid-area: footer;
background-color: green;
}
.template_area{
grid-template-areas:
"header header side"
"footer footer side";
}
Détermine l'emplacement d'un élément de grille dans la grille en se référant à des lignes de grille spécifiques.
.item1 {
grid-column: 2 / 4;
grid-row: 1 / 2;
background-color: red;
}
.item2 {
grid-column: 1 / 2;
grid-row: 1 / 3;
background-color: orange;
}
.item3 {
grid-column: 2 / 4;
grid-row: 2 / 3;
background-color: green;
}
Spécifie la taille des lignes de la grille.
.container__block{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 20px 10px;
}
Aligne les éléments de la grille le long de l'axe de la colonne et/ou de la ligne.
.container__block{
display: grid;
place-items: center;
}
.item1{
width: 25px;
height: 25px;
background-color: red;
justify-self: end;
}
.item2{
width: 25px;
height: 25px;
background-color: green;
justify-self: center;
align-self: start;
}
Grid est complexe mais possède un énorme potentiel lorsqu'il est maitrisé et il est complémentaire avec Flexbox qui lui est plus simple dans sa prise en main.