Mon Site

Bienvenue sur cette page de démonstration

Section 1 - Contenu Normal

Ceci est une section de contenu normal, avec une largeur maximale et des marges latérales. Les paragraphes sont bien alignés et le contenu est facile à lire.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section 2 - Full-bleed avec Fond

Cette section s'étend sur toute la largeur de l'écran (full-bleed) et possède un fond de couleur. Le contenu interne reste centré et bien lisible.

Le paragraphe ici est bien aligné malgré le fond qui s'étend jusqu'aux bords.

Section 3 - Contenu Normal

De retour à une section avec largeur limitée. Cela crée un contraste visuel avec la section précédente.

Sous-article

Les articles peuvent être imbriqués pour une meilleure structure sémantique.

Section 4 - Full-bleed Bleue

Une autre section en full-bleed avec une couleur de fond différente. Les paragraphes conservent leur alignement correct.

Vous pouvez ajouter autant de sections full-bleed que vous le souhaitez, chacune avec ses propres couleurs et contenus.

Section 5 - Contenu Structuré

Cette section contient des éléments HTML sémantiques sans classes CSS inutiles.

Section 6 - Full-bleed Minimaliste

Section full-bleed sans couleur de fond, juste avec des bordures pour définir l'espace.

Les paragraphes restent parfaitement alignés avec le reste du contenu.

Technique CSS Grid Full-bleed

Cette page utilise une technique CSS Grid pour gérer les sections full-bleed. Voici comment elle fonctionne :

Concept principal

La grille du body est divisée en 3 colonnes : une colonne fluide à gauche, un conteneur limité à 900px au centre, et une colonne fluide à droite. Cette approche garantit un alignement parfait à tous les écrans.

Code CSS du body

body {
    display: grid;
    grid-template-columns: 1fr min(100%, 900px) 1fr;
}

Chaque élément normal (header, section, footer) occupe la colonne 2 : 

section {
    grid-column: 2;
    padding: 2rem 1rem;
}

Sections full-bleed

Pour les sections full-bleed, on utilise grid-column: 1 / -1 pour s'étendre sur toutes les colonnes. La section crée ensuite sa propre grille interne identique, ce qui permet au contenu d'être parfaitement aligné avec le reste : 

section[data-fullbleed] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr min(100%, 900px) 1fr;
    padding: 2rem 0;
}

section[data-fullbleed] > * {
    grid-column: 2;
    padding-inline: 1rem;
}

Structure HTML

Les sections full-bleed utilisent simplement un attribut data : 

<section data-fullbleed data-bg="light">
    <h2>Titre</h2>
    <p>Contenu...</p>
</section>

Avantages