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
}