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 :

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
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>
<main>
  <div id="div1">
    Contenu 1
  </div>
  <div id="div2">
    Contenu 2
  </div>
  <div id="div3">
    Contenu 3
  </div>
  ...
  <div id="div9">
    Contenu 9
  </div>
</main>
num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
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
}
main {
  display: grid;
  grid-template-areas:
    "bloc1 bloc1 bloc2"
    "bloc3 bloc4 bloc4"
    "bloc3 bloc5 bloc6"
    "bloc8 bloc8 bloc6"
    "bloc8 bloc8 bloc7"
    "bloc9 bloc9 bloc9";
  grid-auto-columns: 100px;
  grid-auto-rows: 100px;
}

#div1 {
  grid-area: bloc1;
}

#div2 {
  grid-area: bloc2;
}

 ...

#div9 {
  grid-area: bloc9;
}


 
 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
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
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";
grid-template-areas:
  "bloc1 bloc1 bloc2"
  "bloc3 bloc4 bloc4"
  "bloc3 bloc5 bloc6"
  "bloc8 bloc8 bloc6"
  "bloc8 bloc8 bloc7"
  "bloc9 bloc9 bloc9";
Si vous remplacez un nom par un point, la cellule ne sera pas occupée.
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
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";
grid-template-areas:
  "bloc1 bloc1 bloc2"
  "bloc3 bloc4 bloc4"
  "bloc3 bloc5 ."
  "bloc8 bloc8 bloc6"
  "bloc8 bloc8 bloc7"
  ". 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.
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
1
#div1 {
2
  grid-area: bloc1;
3
}
4
#div2 {
5
  grid-area: bloc2;
6
}
7
...
8
#div9 {
9
  grid-area: bloc9;
10
}
#div1 {
  grid-area: bloc1;
}
#div2 {
  grid-area: bloc2;
}
...
#div9 {
  grid-area: bloc9;
}