Grid Template Areas - Leonel Ngoya

Hey,
Dans cet article, nous allons voir comment utiliser la propriété grid-template-areas pour créer des mises en page complexes. Cette propriété est l'une des plus puissantes de CSS Grid Layout et elle permet de définir des zones nommées dans une grille. Ces zones peuvent ensuite être utilisées pour positionner les éléments enfants de la grille.

Dans mon entourage, beaucoup de personnes évitent d'utiliser CSS Grid ( moi y compris ) parce que c'est plus ou moins compliqué mais surtout parce que les Flexbox sont plus faciles à comprendre et ça fait totalement le travail. Mais il y a des cas où CSS Grid est plus approprié et c'est le cas des mises en page complexes.

Pour commencer, je vais vous montrer une Bento Grid ( que vous pouvez retrouver ICI ) et nous allons voir comment nous aurions procédé pour la réaliser avec Flexbox pour ensuite montrer la facilité avec laquelle nous pouvons le faire avec CSS Grid notamment avec la propriété grid-template-areas.

Alors, pour réaliser cette Bento Grid avec Flexbox on peut procéder comme suit :

Où chaque couleur répresente une div, en html on devrait donc avoir quelque chose comme ça :

<div>
  <div>
    <div>A</div>
    <div>
      <div>B</div>
      <div>
        <div>C</div>
        <div>D</div>
      </div>
    </div>
  </div>
  <div>
    <div>E</div>
    <div>F</div>
  </div>
</div>

Nous remarquons donc que pour une simple grille de 3 lignes et 3 colones nous avons déjà une structure html assez complexe ce qui impliquera beaucoup de display: flex et flex-direction pour arriver à un résultat satisfaisant.

Maintenant, prenons la même grille et voyons comment nous pouvons la réaliser avec CSS Grid et la propriété grid-template-areas.
Quand vous voulez utiliser cette méthode, ce que je vous conseille premièrement c'est de dessiner votre grille sur une feuille de papier ou n'importe quel outil de dessin ( comme FigJam ), pour mieux visualiser les zones et ensuite vous pourrez les nommer.
Dans notre cas, nous avons donc :

Je sais pas si vous l'avez remarqué mais la nommenclature n'est pas faite par hasard, le nom que vous assosiez à une zone doit représenter le contenu de cette zone, ce qui fait en sorte qu'on peut se retrouver avec 2 ou plusieurs zones avec le même nom.

C'est le moment où vous me dites, okay LN c'est bien tout ça mais comment matérialiser en HTML / CSS ?
Commençons par le HTML :

<div class="grid">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
  <div class="E">E</div>
  <div class="F">F</div>
</div>

Ce n'est pas un rêve, contrairement à Flexbox, avec l'utilisation de grid-template-areas nous avons une structure html très simple, pas d'imbrication et c'est ce qui fait sa force.
En code CSS, nous aurons :

.grid {
  display: grid;
  grid-template-areas:
    'A B B'
    'A C D'
    'E E F';
  gap: 10px;
  height: 100vh; /* Pour la hauteur de la grille */
}

.A {
  grid-area: A;
}

.B {
  grid-area: B;
}

.C {
  grid-area: C;
}

.D {
  grid-area: D;
}

.E {
  grid-area: E;
}

.F {
  grid-area: F;
}

Ce qui se passe ici c'est que nous avons défini les zones de notre grille avec grid-template-areas et ensuite nous avons associé chaque div à une zone avec grid-area.

grid-template-areas:
  'A B B'
  'A C D'
  'E E F';

Cette partie représente exactement la grille que nous avons dessiné, chaque ligne représente une ligne de la grille et chaque mot représente une zone de la grille.

Et rien qu'avec ça nous aurons notre résultat final ressemblant à :

J'ai eu à faire une Vidéo Youtube sur ce sujet, je vous invite à la regarder pour mieux comprendre si vous avez toujours des zones d'ombre.

On est arrivé a la fin de cet article et j'espère qu'il vous a plu, si c'est le cas n'hésitez pas a partager sur vos réseaux et aussi a poser vos questions si vous n'avez pas très bien compris un point. On se dit donc au prochain article, ciao ! C'était LN 👋

Article précédent : Flexbox partie 2