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éfinitiongrid-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éfinitiongrid-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
									}