Mise en page avec flex et grid

Ce que tu vas apprendre

• Aligner des éléments sur une ligne ou une colonne avec flex.
• Créer une grille de cartes avec grid et grid-cols-*.
• Choisir entre flex et grid selon le besoin.

Flex : une ligne ou une colonne

Un en-tête de site avec un logo à gauche et des liens à droite :

<header class="flex items-center justify-between p-4">
  <a href="/" class="text-xl font-bold">Recettes</a>
  <nav class="flex gap-4">
    <a href="/recettes">Toutes</a>
    <a href="/ingredients">Ingrédients</a>
  </nav>
</header>

La classe flex transforme un élément en conteneur flex : ses enfants se placent côte à côte, sur une même ligne. Tu connais déjà display: flex en CSS, c'est la même chose.

Les trois autres classes règlent le placement :

Changer de direction

Par défaut, flex place les éléments en ligne. flex-col les empile :

<ul class="flex flex-col gap-2">
  <li>Farine</li>
  <li>Œufs</li>
  <li>Lait</li>
</ul>

flex-row est la direction par défaut, utile surtout pour la remettre sur grand écran (chapitre 4).

Les principales classes de flex

flex-1 sert à pousser un contenu :

<div class="flex gap-4">
  <img src="/crepes.jpg" alt="Crêpes" class="w-24" />
  <div class="flex-1">Le texte occupe tout le reste de la largeur.</div>
</div>

Ici, l'image garde sa largeur de 6 rem (w-24) et le bloc de texte occupe tout l'espace disponible.

Grid : des lignes et des colonnes

Pour afficher les recettes en grille, grid est plus simple :

<ul class="grid grid-cols-3 gap-4">
  <li class="rounded-lg border p-4">Crêpes</li>
  <li class="rounded-lg border p-4">Quiche</li>
  <li class="rounded-lg border p-4">Ratatouille</li>
  <li class="rounded-lg border p-4">Tarte aux pommes</li>
</ul>

grid crée une grille, grid-cols-3 la découpe en 3 colonnes de même largeur. Les cartes se rangent de gauche à droite, puis passent à la ligne.

grid-cols-<nombre> produit repeat(<nombre>, minmax(0, 1fr)) : des colonnes égales qui se partagent la largeur.

Étendre une case sur plusieurs colonnes

Pour qu'une case occupe plusieurs colonnes, utilise col-span-* :

<ul class="grid grid-cols-3 gap-4">
  <li class="col-span-2">Recette du jour</li>
  <li>Autre recette</li>
</ul>

La première case prend deux colonnes sur trois. gap-4 règle l'espace entre les cases, dans les deux directions.

Flex ou grid ?

Règle simple : flex pour une dimension (une ligne ou une colonne), grid pour deux (lignes et colonnes). Tu peux aussi les imbriquer : une grille de cartes, dont chaque carte est un conteneur flex.

Centrer un élément

Un cas très fréquent : centrer un bloc au milieu de l'écran.

<main class="flex min-h-screen items-center justify-center">
  <p>Aucune recette trouvée.</p>
</main>

min-h-screen donne au conteneur au moins la hauteur de l'écran, ce qui permet de centrer verticalement.

À retenir

• flex place les enfants sur une ligne ; flex-col les empile.
• justify-* répartit sur l'axe principal, items-* aligne sur l'axe secondaire.
• gap-* met un espace régulier entre les enfants, sans marges à gérer.
• grid grid-cols-3 crée trois colonnes égales ; col-span-2 fait occuper deux colonnes à une case.
• Flex pour une direction, grid pour une grille ; les deux se combinent.