CSS Grid et Flexbox se complètent parfaitement

Lorsque l’on parle de mise en page moderne, CSS Grid et Flexbox sont les deux outils incontournables qui ont redéfini la manière dont nous construisons des interfaces web. Si vous êtes un développeur en herbe ou un expérimenté, il est essentiel de bien comprendre quand et comment utiliser ces outils pour obtenir des mises en page performantes et flexibles.

Ressources pour commencer

Si vous cherchez à maîtriser les bases et à avoir un aperçu des propriétés fondamentales de Flexbox et CSS Grid, voici quelques ressources incontournables :

• MDN – Flexbox : Une documentation complète sur Flexbox
• MDN – CSS Grid : La référence officielle pour CSS Grid
• CSS-Tricks – Flexbox : Un guide visuel et détaillé de Flexbox
• CSS-Tricks – Grid : Le guide complet de CSS Grid

Ces ressources vous offriront une prise en main rapide des propriétés essentielles, tant pour les conteneurs que pour les éléments à l’intérieur, en vous permettant d’approfondir chaque détail pour une utilisation optimale de ces deux systèmes.

Flexbox et Grid : Une relation pas aussi binaire qu’on le pense

Flexbox et CSS Grid sont deux systèmes de mise en page complémentaires. Ils ne sont pas destinés à être utilisés de manière exclusive l’un de l’autre, mais plutôt pour se compléter. Le Flexbox est idéal pour les mises en page unidimensionnelles (lorsque vous travaillez sur une ligne ou une colonne), tandis que CSS Grid brille dans des mises en page bidimensionnelles (lorsque vous voulez gérer à la fois des lignes et des colonnes).

L’utilisation conjointe de ces deux systèmes peut être très puissante. Par exemple, vous pouvez utiliser Grid pour structurer les grandes sections de votre page (comme un header, un contenu principal et un footer), et ensuite appliquer Flexbox à l’intérieur de certaines sections pour gérer l’alignement des éléments internes.

Une disposition multi-colonnes responsive avec Grid et Flexbox

Dans certaines mises en page, nous devons créer des colonnes imbriquées pour organiser différents types de contenu, par exemple des sections principales et secondaires qui doivent s’adapter en fonction de l’écran. L’avantage d’utiliser CSS Grid et Flexbox ensemble est de combiner la gestion rigoureuse de la disposition globale (par Grid) avec la flexibilité nécessaire au niveau des éléments internes (par Flexbox).

Prenons un exemple où nous avons une colonne principale qui occupe deux tiers de l’espace et une colonne secondaire qui occupe un tiers. À l’intérieur de la colonne principale, nous voulons afficher plusieurs blocs qui se réorganisent dynamiquement en fonction de la largeur disponible sans utiliser de media queries

<div class="container">
    <main>
		<header>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus veritatis qui tempore eos, earum iusto, magni minima eligendi nam odio numquam repudiandae quis quo ratione nisi expedita, dolorem inventore nesciunt soluta praesentium. Nostrum quod beatae ut eveniet facere animi fuga impedit officiis consequuntur odio ipsum saepe cum cumque, delectus obcaecati soluta nemo temporibus, sit inventore officia.</header>
        <div class="sub-column">Bloc 1</div>
        <div class="sub-column">Bloc 2</div>
        <div class="sub-column">Bloc 3</div>
        <div class="sub-column">Bloc 4</div>
    </main>
    <aside class="secondary-column">Colonne secondaire</aside>
</div>

	.container {
	  display: grid;
	  grid-template-columns: 2fr 1fr; 
	  gap: 20px;  
	}
	main {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 10px; 
	}
	header {
		width:100%;
	}
	aside {
	  background-color: lightgray;
	  padding: 20px;
	  border-radius: 5px;
	}
	.sub-column {
	  flex-grow: 1; 
	  min-width: 200px; 

	  background-color: #f0f0f0; 
	  padding: 15px;
	  border-radius: 5px;
	}

1. grid-template-columns: 2fr 1fr; : Utiliser Grid pour définir la structure générale permet de contrôler précisément la largeur des colonnes. Ici, nous avons une colonne principale qui occupe deux tiers de l’espace et une colonne secondaire qui occupe un tiers.
2. display: flex; dans main : À l’intérieur de la colonne principale, Flexbox est utilisé pour disposer les sous-sections côte à côte et permettre une réorganisation fluide en fonction de l’espace disponible.
3. flex-grow: 1; et min-width: 200px; : Chaque sous-section se partage l’espace disponible de manière équivalente, mais ne peut descendre au dessous de 200ps de large. Cela permet aux blocs de se réorganiser dynamiquement, passant de quatre à deux blocs par ligne, puis à un seul si l’espace devient trop restreint.
4. flex-wrap: wrap; : Permet aux blocs de passer sur une nouvelle ligne lorsque l’espace disponible devient insuffisant pour tous les blocs sur une seule ligne.

Pourquoi cette approche est utile ?

• Adaptabilité sans media queries : Cette approche permet de créer une mise en page qui s’adapte dynamiquement en fonction de la taille de l’écran, sans avoir à recourir aux media queries. Cela simplifie le code et améliore la maintenabilité.
• Combinaison des forces : Grid est utilisé pour définir la structure de haut niveau de la page, ce qui facilite la création d’une disposition claire entre les colonnes principales et secondaires. Flexbox est idéal pour ajuster le contenu à l’intérieur de chaque colonne de manière dynamique, en particulier lorsque le nombre d’éléments peut varier.
• Contrôle et flexibilité : Utiliser Grid pour la structure globale permet d’avoir un contrôle strict sur les proportions des colonnes, tandis que Flexbox permet aux sous-sections de s’aligner côte à côte ou de se répartir sur plusieurs lignes si nécessaire, assurant une mise en page responsive et harmonieuse.

Cette approche est particulièrement utile pour créer des mises en page où des sections imbriquées doivent être alignées et organisées de manière flexible, tout en garantissant une disposition stable des colonnes principales.

La Magie des Propriétés auto-fit et auto-fill avec minmax()

Les propriétés auto-fit et auto-fill combinées avec minmax() sont souvent perçues comme mystérieuses à première vue. Une fois maîtrisées, elles vous permettent de créer des mises en page dynamiques qui s’adaptent naturellement aux différentes tailles d’écran.

Imaginons une galerie responsive où les images doivent être affichées sur plusieurs colonnes, mais sans devenir trop petites.

<div class="container">
  <img src="https://via.placeholder.com/300" alt="Placeholder Image">
  <img src="https://via.placeholder.com/300" alt="Placeholder Image">
  <img src="https://via.placeholder.com/300" alt="Placeholder Image">
  <img src="https://via.placeholder.com/300" alt="Placeholder Image">
</div>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

img {
  width: 100%;
  box-sizing: border-box;
}

Dans cet exemple, auto-fill remplit l’espace disponible avec autant de colonnes que possible, tandis que minmax(200px, 1fr) garantit que chaque élément de la grille a une largeur minimale de 200 pixels, mais peut s’étendre pour occuper tout l’espace disponible. Le gap de 16px ajoute un espacement uniforme entre les images, ce qui garantit qu’il y a également un espacement latéral entre chaque image. En utilisant box-sizing: border-box; sur les images, cela permet de garantir que les images tiennent compte de tout éventuel padding ou bordure dans leur calcul de largeur.

Sans cette approche, il aurait fallu définir manuellement des breakpoints et ajuster la largeur des éléments pour chaque taille d’écran, rendant le code complexe et difficile à maintenir. Ici, minmax() simplifie tout en assurant une expérience utilisateur optimale.

Une mise en page plus complète et proche des besoins classiques

Passons maintenant à une mise en page plus complète qui combine CSS Grid et Flexbox pour créer une interface à la fois complexe et adaptable et proche des besoins classique d’interface. L’idée est de montrer comment utiliser ces deux techniques en harmonie pour construire une mise en page efficace. Voici une explication étape par étape de la structure et de la logique de conception, avec des fragments de code pertinents pour chaque phase.

Structure HTML de Base

L’objectif est de construire une interface « en tableau de bord » avec un en-tête, une barre latérale, une section de contenu principal contenant des widgets, et un pied de page avec plusieurs sections organisées dynamiquement en fonction de la taille de l’écran.

La structure HTML contient quatre parties principales : un en-tête (header), une barre latérale (sidebar), une section de contenu principal (main) qui contient des widgets, et un pied de page (footer). Cette structure est couramment utilisée pour organiser un tableau de bord.

<div class="container">
    <header>
        <h1>En-tête du Tableau de Bord</h1>
    </header>
    
    <aside>
        <h2>Navigation de la Barre Latérale</h2>
        <ul>
            <li>Accueil</li>
            <li>Profil</li>
            <li>Paramètres</li>
            <li>Déconnexion</li>
        </ul>
    </aside>
    
    <main>
        <h2>Zone de Contenu Principal</h2>
        <section class="widget-container">
            <div class="widget">Widget 1</div>
            <div class="widget">Widget 2</div>
            <div class="widget">Widget 3</div>
            <div class="widget">Widget 4</div>
            <div class="widget">Widget 5</div>
            <div class="widget">Widget 6</div>
        </section>
    </main>
    
    <footer>
        <div class="footer-section">Pied de Page Section 1</div>
        <div class="footer-section">Pied de Page Section 2</div>
        <div class="footer-section">Pied de Page Section 3</div>
        <div class="footer-section">Pied de Page Section 4</div>
    </footer>
</div>

Avantages des Balises HTML5 Sémantiques

1. Accessibilité : Les balises comme <header>, <main>, <footer>, et <aside> apportent des points de repère importants pour les lecteurs d’écran, aidant les utilisateurs ayant des déficiences visuelles à mieux naviguer sur la page.
2. Lisibilité du Code : L’utilisation de balises sémantiques permet de comprendre facilement la fonction de chaque partie de la page, rendant le code plus lisible pour les développeurs. Par exemple, <aside> est utilisé pour les informations complémentaires (barre latérale), ce qui est immédiatement compréhensible.
3. Amélioration du SEO : Les moteurs de recherche utilisent ces balises pour mieux comprendre la structure de la page et pour identifier les informations importantes. Cela améliore le classement SEO, car les balises comme <main> indiquent clairement quel contenu est prioritaire.

Mise en Page avec CSS Grid et Flexbox

Pour organiser la disposition générale, CSS Grid est utilisé. La classe .container gère la disposition principale.

.container {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px 1fr auto;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    height: 100vh;
    gap: 10px;
}

La disposition est organisée en deux colonnes : une colonne fixe pour la barre latérale (aside) et une colonne flexible pour le contenu principal (main). La définition des lignes (grid-template-rows) assure une distribution claire entre l’en-tête, la section principale, et le pied de page.

En-Tête (Header)

L’en-tête (header) utilise Flexbox pour centrer verticalement le contenu, offrant ainsi une bonne expérience utilisateur.

header {
    grid-area: header;
    background-color: #333;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

Barre Latérale (Aside)

La barre latérale (aside) est située sur la gauche, offrant des options de navigation principales.

aside {
    grid-area: sidebar;
    background-color: #444;
    color: white;
    padding: 20px;
}

Le fond légèrement plus clair par rapport à l’en-tête permet une distinction visuelle tout en maintenant une unité de couleur sur l’ensemble de la page.

Section de Contenu Principal (Main)

La section principale (main) est organisée pour contenir une série de widgets disposés à l’aide de Flexbox.

main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background-color: #f9f9f9;
}

Ici, Flexbox (display: flex) est employé avec flex-direction: column pour organiser les éléments de manière verticale. Le gap de 20 pixels entre chaque élément contribue à une présentation soignée et espacée, tandis que la couleur de fond claire contraste avec la barre latérale.

Widgets dans la Section Principale

Les widgets sont disposés horizontalement, utilisant Flexbox pour créer une disposition flexible qui s’adapte à l’espace disponible.

.widget-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.widget {
    background-color: #ddd;
    padding: 20px;
    flex: 1 1 calc(33.333% - 40px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

Le conteneur de widgets (.widget-container) utilise Flexbox pour organiser les widgets horizontalement, et flex-wrap: wrap permet de les répartir sur plusieurs lignes si nécessaire. Chaque widget occupe environ un tiers de la largeur disponible (flex: 1 1 calc(33.333% - 40px)), ce qui permet une mise en page harmonieuse.

Pied de Page à Quatre Sections (Footer)

Le pied de page (footer) est divisé en quatre sections égales, grâce à l’utilisation de CSS Grid.

footer {
    grid-area: footer;
    display: grid;
    gap: 10px;
    padding: 20px;
    background-color: #555;
    grid-template-columns: repeat(4, 1fr);
}
.footer-section {
    background-color: #666;
    color: white;
    padding: 20px;
    text-align: center;
}

Ajustements Responsifs pour le Footer

Pour garantir une bonne disposition du pied de page sur les écrans de différentes tailles, nous utilisons les media queries :

Écrans Moyens (max-width: 1024px) : Le pied de page est divisé en deux colonnes et deux lignes pour une disposition équilibrée.

@media (max-width: 1024px) {
    footer {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
    }
}

Petits Écrans (max-width: 768px) : Chaque section du pied de page est placée sur une ligne distincte, garantissant ainsi une lisibilité maximale.

@media (max-width: 768px) {
    footer {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
    }
    .container {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "sidebar"
            "main"
            "footer";
    }
    .widget {
        flex: 1 1 calc(100% - 40px);
    }
}

Ces ajustements assurent une bonne répartition du pied de page, sans qu’aucune section ne soit disproportionnée. De plus, la barre latérale est placée au-dessus de la zone principale sur les petits écrans pour offrir une meilleure navigation.

Annotations générales sur la mise en place de cette interface

L’utilisation des balises HTML5 sémantiques (<header>, <aside>, <main>, <footer>) au lieu de simples <div> améliore considérablement la lisibilité, l’accessibilité, et le référencement de la page. En combinant CSS Grid et Flexbox, cette mise en page est à la fois sophistiquée, réactive, et sémantique. L’en-tête, la barre latérale, la section de contenu principal, et le pied de page sont tous bien définis, et la page s’adapte facilement à différentes tailles d’écran, garantissant une expérience utilisateur cohérente et agréable sur n’importe quel appareil.

Conclusions

L’utilisation conjointe de CSS Grid et de Flexbox est un domaine riche en possibilités et à explorer, car ces deux technologies sont réellement complémentaires. Les exemples que nous avons vus tout au long de cet article ne représentent qu’une ébauche des nombreuses façons dont ces outils peuvent être combinés pour créer des mises en page sophistiquées, flexibles et adaptatives. L’exploration continue de leurs fonctionnalités vous permettra de tirer pleinement parti de leurs avantages pour créer des interfaces modernes et dynamiques.