Module 3 : Mise en page (Layout) et Flexibilité : Partie 2

Objectif : Construire des structures complexes sans quitter le HTML.

---

2. Grid CSS Avancé

Alors que Flexbox gère une seule dimension (ligne ou colonne), Grid gère les deux simultanément. C’est l’outil ultime pour créer des structures complexes.

A. Configuration de base de la grille
Pour activer une grille, utilisez grid. Vous définissez ensuite le nombre de colonnes avec grid-cols-{n}.

Exemple :

<!-- Une grille simple de 3 colonnes avec un espacement de 16px -->
<div class="grid grid-cols-3 gap-4">
    <div class="bg-blue-100 p-4">1</div>
    <div class="bg-blue-100 p-4">2</div>
    <div class="bg-blue-100 p-4">3</div>
</div>

B. Créer un Layout “Bento Box”
Le style Bento repose sur des éléments qui s’étendent sur plusieurs colonnes ou lignes. On utilise pour cela col-span-{n} et row-span-{n}.

Exemple concret :

<div class="grid h-[500px] grid-cols-4 grid-rows-2 gap-4">
    <!-- Élément principal (prend 2 colonnes et 2 lignes) -->
    <div class="col-span-2 row-span-2 rounded-3xl bg-slate-800 p-6 text-white">Grande Tuile</div>

    <!-- Tuiles secondaires -->
    <div class="col-span-2 rounded-3xl bg-indigo-500 p-6">Moyenne Tuile</div>
    <div class="rounded-3xl bg-emerald-400 p-6">Petite</div>
    <div class="rounded-3xl bg-orange-400 p-6">Petite</div>
</div>

C. Gérer les zones nommées (Nouveauté Simplifiée v4)
En 2025, Tailwind v4 permet une intégration plus fluide des grid-template-areas via le fichier CSS de configuration (@theme). Cela permet de nommer vos zones pour plus de clarté.

1. Définition dans votre CSS (src/app.css) :

@theme {
    --grid-template-layout: 'header header' 'sidebar main' 'footer footer';
}

2. Utilisation dans le HTML :

<div class="grid-areas-layout grid grid-cols-[200px_1fr]">
    <header class="area-header bg-gray-200">Haut de page</header>
    <aside class="area-sidebar bg-gray-100">Barre latérale</aside>
    <main class="area-main bg-white">Contenu principal</main>
    <footer class="area-footer bg-gray-300">Pied de page</footer>
</div>

(Note : Les utilitaires grid-areas-_etarea-_ sont activables via les plugins officiels de la v4 pour lier les noms de variables CSS aux classes.)

D. Placement automatique et “Dense”
Si vos éléments ont des tailles différentes, la grille peut laisser des trous. L’utilitaire grid-flow-dense demande à Tailwind de remplir les espaces vides automatiquement avec les éléments plus petits qui suivent dans le code.

Exemple :

<!-- Remplit intelligemment les vides de la Bento Box -->
<div class="grid grid-flow-dense grid-cols-3 gap-2">
    <div class="col-span-2 bg-red-200">Large</div>
    <div class="bg-green-200">Petit</div>
    <div class="bg-blue-200">Petit (va remonter si un trou existe)</div>
</div>

E. Synthèse des classes “Grid” indispensables :

• grid-cols-[valeur] : Définir des colonnes (ex: grid-cols-[1fr_2fr_1fr]).
• col-span-{n} : Nombre de colonnes occupées.
• row-span-{n} : Nombre de lignes occupées.
• aspect-square : Force une tuile à rester carrée (parfait pour le design Bento).
• place-items-center : Centre le contenu horizontalement ET verticalement à l’intérieur de chaque cellule.

Exercice : Essayez de reproduire la page d’accueil d’un iPhone (grille d’icônes) en utilisant grid-cols-4 et gap-6. Pour les widgets plus larges, appliquez col-span-2.

---

3. Positionnement et Z-index

Le positionnement permet de sortir un élément du flux normal du document pour le placer avec précision, tandis que le z-index gère l’empilement (quelle couche est au-dessus de l’autre).

A. Les 5 types de positionnement
En Tailwind, on utilise des classes directes pour définir la propriété position :

1. static (par défaut) : L’élément suit le flux normal. Les propriétés top, bottom, etc., n’ont aucun effet.
2. relative : L’élément reste dans le flux, mais vous pouvez le décaler sans affecter ses voisins. Crucial : sert de point de repère pour les enfants en absolute.
3. absolute : L’élément sort du flux et se place par rapport à son premier parent positionné (souvent en relative).
4. fixed : L’élément est placé par rapport à la fenêtre du navigateur (viewport). Il ne bouge pas au scroll.
5. sticky : L’élément se comporte comme relative jusqu’à ce qu’il atteigne un seuil (ex: le haut de l’écran) où il devient fixed.

B. Placement précis (Top / Right / Bottom / Left)
Une fois positionné (souvent en absolute), on utilise les classes de direction combinées à l’échelle d’espacement de la v4 :

Exemple : Un badge de notification sur une icône

<div class="relative h-12 w-12 rounded-lg bg-gray-200">
    <span class="absolute -top-2 -right-2 flex h-5 w-5 rounded-full bg-red-500"></span>
</div>

• Utilisation des valeurs négatives : Ajoutez un signe moins (ex: -top-2) pour faire sortir l’élément de son conteneur.
• Raccourci inset : inset-0 applique top: 0; right: 0; bottom: 0; left: 0;. C’est la méthode la plus rapide pour qu’un élément remplisse tout son parent relative.

C. Le Z-index : Gérer les couches
En 2025, la v4 a simplifié la gestion du z-index. Par défaut, l’échelle va de 0 à 50, mais elle est désormais plus facilement extensible via @theme.

• z-0 à z-50 : Pour les besoins courants.
• z-auto : Laisse le navigateur décider.

Exemple d’empilement complexe :

<div class="relative">
    <!-- Arrière-plan (Z-0 par défaut) -->
    <div class="h-32 w-full bg-blue-500"></div>

    <!-- Élément superposé -->
    <div class="absolute inset-0 z-10 flex items-center justify-center">
        <button class="bg-white p-2 shadow-xl">Cliquer ici</button>
    </div>

    <!-- Overlay de modal (Z-40) -->
    <div class="fixed inset-0 z-40 bg-black/60"></div>

    <!-- Fenêtre Modal (Z-50) -->
    <div class="fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2 bg-white p-8">Contenu de la Modal</div>
</div>

D. Le piège du Contexte d’Empilement (Stacking Context)
Un z-index: 999 ne fonctionnera pas si le parent a un z-index inférieur à celui d’un autre groupe. En 2025, Tailwind v4 encourage l’utilisation de la propriété CSS isolation :

• isolate : Crée un nouveau contexte d’empilement. Cela garantit que les z-index des enfants ne “fuient” pas et ne luttent pas contre des éléments extérieurs au conteneur.

E. Nouveauté 2025 : Anchor Positioning (Support v4)
Tailwind v4 commence à intégrer l’Anchor Positioning natif du CSS moderne. Cela permet de lier un élément (comme un menu déroulant ou un tooltip) à un autre sans avoir besoin de calculs JavaScript complexes.

• Syntaxe anticipée : anchor-{id} et anchor-pos-top.

Résumé des classes à maîtriser :

Classe	Rôle
relative	Point de référence pour les enfants.
absolute	Sortir du flux pour un placement libre.
sticky top-0	Créer un menu qui reste collé en haut au scroll.
inset-0	Remplir tout l’espace disponible (top/right/bottom/left = 0).
z-{valeur}	Définir l’ordre d’empilement vertical.
isolate	Isoler les couches d’un composant du reste de la page.

---

4. Containers et Max-width : Stratégies pour les grands écrans

L’objectif ici est d’éviter que votre contenu ne s’étale sur toute la largeur de l’écran, ce qui rendrait les lignes de texte trop longues à lire et déstructurerait l’interface.

A. La classe container
La classe container de Tailwind est un utilitaire qui fixe la largeur maximale (max-width) d’un élément en fonction du point d’arrêt (breakpoint) actuel.

• Comportement par défaut : Il n’est pas centré automatiquement.
• Bonne pratique : On le combine presque toujours avec mx-auto pour le centrer.

Exemple :

<!-- Structure standard d'une page en 2025 -->
<main class="container mx-auto px-4">
    <!-- Votre contenu reste centré et ne dépasse pas une certaine largeur -->
</main>

B. Configuration du Container dans la v4
Dans Tailwind v4, vous pouvez configurer le comportement du container directement dans votre bloc @theme en CSS pour qu’il soit toujours centré par défaut :

/* src/app.css */
@theme {
    --container-center: true;
    --container-padding: 2rem;
}

C. Utilisation de max-width (Les classes max-w-*)
Parfois, le container standard est trop large (ex: pour un article de blog ou un formulaire). On utilise alors les classes de largeur maximale :

• max-w-prose : La largeur idéale pour la lecture (environ 65 caractères).
• max-w-md (28rem), max-w-xl (36rem)… jusqu’à max-w-7xl.
• max-w-full : L’élément prend 100% de la largeur.

Exemple :

<!-- Exemple pour un article de blog parfaitement lisible -->
<article class="mx-auto max-w-prose py-10">
    <h1>Pourquoi Tailwind v4 est incroyable</h1>
    <p>Le contenu est ici limité en largeur pour ne pas fatiguer l'œil...</p>
</article>

D. Stratégies “Full-bleed” vs “Boxed”
En 2025, le design web alterne souvent entre des sections qui prennent toute la largeur (Full-bleed) et des sections contenues (Boxed).

1. Layout Boxed : Tout le site est dans un container.
2. Layout Mixte (Recommandé) :
   • Le fond (background) d’une section prend w-full.
   • Le contenu intérieur est dans un max-w.

Exemple :

<!-- Section avec fond coloré qui s'étend partout -->
<section class="w-full bg-slate-900 py-20 text-white">
    <!-- Mais le contenu reste aligné sur la grille du site -->
    <div class="mx-auto max-w-6xl px-6">
        <h2>Nos Services</h2>
        <!-- Grille de services -->
    </div>
</section>

E. Le Breakpoint “2XL” et au-delà
Avec les écrans de 2025, le point d’arrêt 2xl (1536px) est souvent atteint. Tailwind v4 permet de définir des limites encore plus hautes :

• max-w-screen-2xl : Aligne la largeur max sur le breakpoint 1536px.
• 3xl (1920px) : Souvent ajouté manuellement dans le @theme pour les très grands écrans.

Résumé des classes clés :

Classe	Usage
container	Fixe une largeur max réactive (responsive).
mx-auto	Centre le container horizontalement.
max-w-prose	Largeur optimale pour les blocs de texte.
max-w-screen-xl	Empêche le site de dépasser 1280px.
px-4 / px-6	Ajoute une marge de sécurité sur mobile pour que le texte ne touche pas les bords de l’écran.

---

TP :
Créez une page avec :

• Un header sticky en haut.
• Un contenu principal en grille Bento (3x2).
• Un footer en bas.
• Utilisez container pour centrer le contenu sur grands écrans.