Full-Bleed avec CSS Grid Avancé

Technique Grid à 3 colonnes

Cette approche utilise une grille avec 3 colonnes: marge gauche, contenu, marge droite.

Les enfants normaux prennent la colonne 2, tandis que les full-bleed s'étendent sur toutes les colonnes (1 / -1).

Section bord à bord

Cette section s'étend sur toute la largeur grâce à grid-column: 1 / -1

Contenu centré

Le contenu revient à sa position normale dans la colonne 2.

La largeur est définie avec min(900px, 100% - 2rem) pour rester responsive.

Autre section colorée

On peut utiliser plusieurs sections full-bleed avec des styles différents.

Avantages de cette approche

✓ Très élégante et maintenable

✓ Responsive par défaut avec min()

✓ Pas besoin de calculs complexes

✓ Fonctionne avec tous les types de contenu