Full-Bleed Layout

Le background s'étend sur toute la largeur de la viewport grâce à margin-inline: calc(-1 * var(--_m))

Comment ça fonctionne

La technique utilise des custom properties CSS et container queries pour créer un système flexible :


html {
    container-type: inline-size;
}

.main-container {
    --_m: clamp(1rem, 5vw, 3rem);
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: var(--_m);
}

.full-bleed {
    margin-inline: calc(-1 * var(--_m));
}

Section avec background

Cette section a un background qui déborde complètement, mais le contenu reste aligné avec le reste de la page grâce au padding interne.

Avantages de cette approche

🎯 Précision

Les marges négatives compensent exactement le padding du container

📱 Responsif

Utilise clamp() et container queries pour s'adapter à tous les écrans

🔧 Maintenable

Une seule variable CSS (--_m) contrôle tout le système

⚡ Performance

Pas de JavaScript nécessaire, tout en CSS pur

Background coloré full-bleed

Cette section démontre comment un background peut s'étendre sur toute la largeur tout en gardant le contenu aligné avec le reste de la mise en page. Le texte reste dans les limites du container principal.

Applications pratiques

Cette technique est parfaite pour :

Sections hero avec background d'image
Zones de contenu colorées
Séparateurs visuels
Call-to-action sections

Background avec motif

Même avec des backgrounds complexes ou des motifs, le contenu reste parfaitement aligné avec le reste de la page. La marge négative permet au background de "saigner" jusqu'aux bords de la viewport.

Conclusion

Cette approche combine la puissance des container queries avec des custom properties pour créer un système de layout flexible et maintenable. Le background peut déborder complètement tandis que le contenu reste parfaitement aligné.