Grid Layout et grid-template-areas

Répartition d'éléments dans une « Grid Layout » en utilisant la propriété grid-template-areas.

Grid sur base de 3 colonnes

Ce que l'on veut

On cherche à répartir 4 zones ayant les largeurs suivantes :

afin d'obtenir un rendu comme ci-dessous :

A
B
C
D

Ce que l'on fait

On part sur la base de la structure HTML suivante : 

<div class="grid grid-col-3">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>

On commence par nommer les zones en utilisant la propriété CSS grid-area : 

div.a { grid-area: a; background-color: #DEF;}
div.b { grid-area: b; background-color: #FDE;}
div.c { grid-area: c; background-color: #EFD;}
div.d { grid-area: d; background-color: #FFD;}

On découpe le conteneur, dans sa largeur, en trois colonnes : Col-1 = 270px, Col-2 = 90px et Col-3 = 180px.

On définie nos 4 zones comme suit :

Ce qui se traduit en langage « Grid Layout » par : 

.grid {
  display: grid;                /* modèle de mise en page */
  grid-template-rows: 1fr 1fr;  /* 2 lignes de même hauteur */
  width: 540px;
  height: 320px;
}
.grid-col-3 {
  grid-template-columns: 270px 90px 180px;
  grid-template-areas:
    "a b b"
    "c c d";
}

Le résultat obtenu est celui recherché.

Grid sur base de 6 colonnes

On pourrait obtenir le même résultat en découpant le conteneur en six colonnes de largeur identique.

Col-1 à Col-6 = 100% / 6 = 540px / 6 = 90px

Les 4 zones seraient définies comme suit :

Concernant le HTML, seule la classe du conteneur change : 

<div class="grid grid-col-6">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>

Le CSS a appliquer lui devient : 

.grid-col-6 {
  grid-template-columns: repeat(6,1fr);
  grid-template-areas:
    "a a a b b b"
    "c c c c d d";
}

Le rendu est en tout point identique.

A
B
C
D

Ressources

D'autres écritures permettent d'obtenir ce même résultat, par exemple avec les propriétés grid-column et grid-row, mais l'utilisation des grid-template-areas permet de visualiser facilement la structure et la disposition à l'intérieur d'un conteneur grille.