Pour mettre en place la grille css il nous faut définir le parent (généralement une enveloppe) en lui attribuant plusieurs choses.
display: grid; (appel).
grid-template-columns (défini la largeur des colonnes, fr = fraction)
grid-gap (donne la largeur des goutières)
Nous lui attribuons « grid-auto-flow: dense; » qui l’oblige à combler les vides au lieu que les blocs se suivent.
ex:
#conteneur {
display:grid;
grid-template-columns: 120px 1fr 1fr 1fr;
grid-gap: 1rem;
grid-auto-flow: dense;
}
Ensuit l’enfant.
Ici le contenu 01 va se placer, à la deuxième rangée, à partir de la première colonne, et finir, à la troisième rangée et à la cinquième colonne.
#contenu01{
grid-area: 2/1/3/5;
Nous pouvons utiliser d’autres valeurs.
Ici il n’y aura que l’étendu sur deux rangées et deux colonnes de contrôlé.
#contenu02{
grid-area: auto/auto/span2/span2;
}
Une autre méthode consiste à établir des noms de zone pour chaque cellules de la grille et ensuite dire quel contenu sera affecté à cette zone.
#conteneur {
display:grid;
grid-template-columns: 120px 1fr 1fr 1fr;
grid-gap: 1rem;
grid-template-areas:
"navigation entête entête entête"
"navigation principal principal annexes-01"
"navigation annexes"02 annexes"02 annexes"01"
"pied pied pied pied"
}
#contenu01 {
grid-area: entête;
}
#contenu02 {
grid-area: navigation;
}
#contenu03 {
grid-area: principal;
}
#contenu04 {
grid-area: annexes-01;
}
#contenu05 {
grid-area: annexes-02;
}
#contenu06 {
grid-area: pied;
}