Chapitre 300 | Flexbox et Grid

La différence entre Flexbox et CSS Grid

Flexbox : des boîtes qu’on range librement au sol

• Imagine que tu as un sol vide.
• Tu poses des boîtes par terre, les unes à côté des autres, sans règle fixe.
• Si une boîte est plus grande, elle pousse les autres pour faire de la place.
• Quand il n’y a plus de place, tu commences une nouvelle rangée (mais c’est toi qui décides).
• Flexbox, c’est pour organiser librement des boîtes, sans avoir besoin de lignes ou de cases visibles.

---

CSS Grid : des boîtes organisées sur un carrelage

• Imagine que le sol est carrelé, avec des cases dessinées.
• Chaque boîte doit être posée dans une case du carrelage.
• Tu peux décider que certaines boîtes prennent une seule case, ou qu’elles en occupent plusieurs.
• Le carrelage fixe les règles : les boîtes doivent suivre la grille.
• CSS Grid, c’est pour organiser précisément des boîtes dans des cases bien définies.

La différence clé :

• Flexbox : tu poses les boîtes librement, elles se poussent pour s’adapter, mais il n’y a pas de règles strictes.
• CSS Grid : tu utilises un carrelage invisible pour ranger les boîtes dans des cases bien précises.

Flexbox : vérification technique

1. « Des boîtes qu’on range librement au sol » :
   ✔️ Vrai. Flexbox n’impose pas une grille stricte comme CSS Grid. Les boîtes sont alignées en fonction des règles définies dans le conteneur Flexbox (justification, alignement, etc.).
2. « Si une boîte est plus grande, elle pousse les autres » :
   ✔️ Vrai. En Flexbox, les éléments s’adaptent à leur contenu ou aux propriétés CSS comme flex-grow, flex-shrink, et flex-basis. Une boîte qui change de taille peut effectivement « pousser » les autres pour s’ajuster à l’espace disponible.
3. « Quand il n’y a plus de place, tu commences une nouvelle rangée » :
   ✔️ Vrai. Si le conteneur Flexbox a la propriété flex-wrap: wrap, les boîtes qui n’ont plus de place passent automatiquement à la ligne suivante. Si ce n’est pas défini (flex-wrap: nowrap), elles restent sur une seule ligne et peuvent déborder.

---

CSS Grid : vérification technique

1. « Des boîtes organisées sur un carrelage » :
   ✔️ Vrai. CSS Grid fonctionne comme une grille composée de lignes et de colonnes. Les boîtes sont positionnées dans cette structure en suivant les règles définies avec des propriétés comme grid-template-rows et grid-template-columns.
2. « Chaque boîte doit être posée dans une case du carrelage » :
   ✔️ Vrai. En CSS Grid, chaque élément est implicitement ou explicitement positionné dans une cellule de la grille, définie par ses lignes et colonnes.
3. « Certaines boîtes prennent une seule case, ou plusieurs » :
   ✔️ Vrai. CSS Grid permet aux boîtes de s’étendre sur plusieurs cellules à l’aide des propriétés grid-column et grid-row.
4. « Le carrelage fixe les règles : les boîtes doivent suivre la grille » :
   ✔️ Vrai. Contrairement à Flexbox, CSS Grid impose que les éléments respectent la structure de la grille, sauf si tu les positionnes manuellement avec des propriétés avancées (comme grid-area).

Information : Elementor utilise Flexbox ou CSS Grid

Dans des outils comme Elementor (constructeur de pages pour WordPress), tu peux choisir d’utiliser soit Flexbox, soit CSS Grid, en fonction de ce que tu veux faire :

• Flexbox est souvent utilisé par défaut pour des alignements simples (rangées ou colonnes).
• CSS Grid peut être activé si tu veux organiser des éléments dans une grille plus complexe, comme un tableau avec plusieurs lignes et colonnes.

L’utilisateur décide de la méthode en fonction du besoin : Elementor te permet de basculer entre ces deux logiques.

Peut-on mélanger Flexbox et CSS Grid ?

Oui, mélanger Flexbox et CSS Grid est une pratique courante, car ils se complètent parfaitement. Voici comment et pourquoi les utiliser ensemble :

1. CSS Grid pour la structure générale

• Utilise CSS Grid pour organiser les grandes zones d’une page (header, sidebar, contenu, footer).
• Cela te donne une mise en page structurée et facile à gérer pour l’ensemble de la page.

2. Flexbox pour l’organisation à l’intérieur des zones

• Utilise Flexbox à l’intérieur de chaque zone (comme le contenu ou le footer).
• Flexbox est parfait pour aligner des éléments, centrer du contenu ou répartir des boutons dans une section.

Conclusion

Pour un débutant, il est difficile de comprendre ou d’imaginer la différence entre Flexbox et CSS Grid tant que l’on n’a pas exploré en profondeur les deux techniques. Bien que leurs usages puissent sembler similaires, leurs logiques et leurs applications diffèrent de manière significative. Cela devient plus clair avec la pratique et une meilleure compréhension des cas d’utilisation spécifiques à chaque méthode.

Comme il s’agit d’un apprentissage de découverte, nous allons nous concentrer sur Flexbox, qui est plus simple à comprendre et couvre de nombreux besoins courants en conception de pages web. Libre à vous, si vous le souhaitez, d’explorer CSS Grid sur votre temps personnel pour approfondir vos connaissances. Notre objectif ici n’est pas d’être exhaustif, mais de vous fournir une base solide. Passons donc à la découverte de Flexbox !