Maîtriser Grid Layout en CSS : Guide pratique pour créer des mises en page complexes avec Grid

 

Vous venez de commencer avec le css et vous  avez déjà eu l'impression que la création de mises en page web était aussi complexe que de déchiffrer un manuel d'instructions d'une langue inconnue ? Détendez-vous, j'en suis aussi passé par là ! Avec le CSS Grid Layout, vous pouvez concevoir des mises en page élégantes et logiques aussi simplement que de jouer au ludo 😂. 

1. Qu'est-ce que le Grid Layout ?

Le CSS Grid Layout est un module CSS qui permet de créer des mises en page en deux dimensions, parfait pour les dispositions complexes. Imaginez un tableau magique où vous pouvez placer vos éléments HTML dans des cellules spécifiques, sans avoir besoin de flotter vos éléments comme des bouteilles dans l'océan.

2. Les bases du Grid Layout

a. Création d'un conteneur de grille

Pour commencer, vous devez définir un conteneur de grille. C'est comme créer un cadre pour votre tableau magique.

.container {
  display: grid;
}

b. Définir des lignes et des colonnes

Ensuite, vous devez spécifier combien de lignes et de colonnes vous voulez dans votre grille. Voici comment :

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Trois colonnes égales */
  grid-template-rows: 100px 200px; /* Deux lignes de hauteurs différentes */
}

c. Placer les éléments dans la grille

Maintenant, placez vos éléments dans les cellules de la grille. C'est comme ranger vos vêtements dans une armoire  : chaque chose doit-être à  sa place.

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

<style>
  .item1 {
  grid-column: 1 / 3; /* Occupe de la colonne 1 à 2 */
  grid-row: 1; /* Occupe la première ligne */
}

</style>

3. Voyons maintenant faires des mises en page complexes avec Grid

a. Utiliser des zones de grille

Les zones de grille vous permettent de nommer des zones de votre grille et de les organiser facilement.

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

<style>

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.footer {
  grid-area: footer;
}

</style>

b. Grille imbriquée

Une grille imbriquée est une grille à l'intérieur d'une grille. Toujours avec notre armoire,  C'est un peu  comme si vous avez des tiroirs supplémentaires pour organiser encore mieux vos tenues.

<div class="container">
  <div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
  </div>
</div>

<style>
  .parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
</style>

Conclusion
Et voilà, vous êtes maintenant un expert du CSS Grid Layout 👌😄!  Vous pouvez faire de belles mise en page  . Et n'oubliez pas , comme on le dit en anglais : PRACTICE MAKE PERFECT