Zone de grille
Une autre façon de définir le positionnement des cellules est d'utiliser grid-template-areas et grid-area.
Prenons l'exemple suivant :
1
<main>
2
<div id="div1">
3
Contenu 1
4
</div>
5
<div id="div2">
6
Contenu 2
7
</div>
8
<div id="div3">
9
Contenu 3
10
</div>
11
...
12
<div id="div9">
13
Contenu 9
14
</div>
15
</main>
1
main {2
display: grid;
3
grid-template-areas:4
"bloc1 bloc1 bloc2"5
"bloc3 bloc4 bloc4"6
"bloc3 bloc5 bloc6"7
"bloc8 bloc8 bloc6"8
"bloc8 bloc8 bloc7"9
"bloc9 bloc9 bloc9";10
grid-auto-columns: 100px;
11
grid-auto-rows: 100px;
12
}
13
14
#div1 {15
grid-area: bloc1;
16
}
17
18
#div2 {19
grid-area: bloc2;
20
}
21
22
...
23
24
#div9 {25
grid-area: bloc9;
26
}
27
Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
grid-template-areas
Définition : grid-template-areas
grid-template-areas permet de définir le motif de votre squelette
1
grid-template-areas:2
"bloc1 bloc1 bloc2"3
"bloc3 bloc4 bloc4"4
"bloc3 bloc5 bloc6"5
"bloc8 bloc8 bloc6"6
"bloc8 bloc8 bloc7"7
"bloc9 bloc9 bloc9";Si vous remplacez un nom par un point, la cellule ne sera pas occupée.
1
grid-template-areas:2
"bloc1 bloc1 bloc2"3
"bloc3 bloc4 bloc4"4
"bloc3 bloc5 ."5
"bloc8 bloc8 bloc6"6
"bloc8 bloc8 bloc7"7
". bloc9 bloc9";
Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
grid-template-areas
Définition : grid-area
grid-area permet de donner un nom à vos blocs.
1
#div1 {2
grid-area: bloc1;
3
}
4
#div2 {5
grid-area: bloc2;
6
}
7
...
8
#div9 {9
grid-area: bloc9;
10
}