Séance 4 : CSS Grid Layout - La Mise en Page Bidimensionnelle

1. Organiser Votre Contenu avec une Grille

1.1 Introduction à CSS Grid Layout

CSS Grid Layout (ou simplement Grid) est un système de mise en page CSS puissant qui permet d'organiser le contenu dans des grilles bidimensionnelles, c'est-à-dire en lignes et en colonnes simultanément. Contrairement à Flexbox qui est unidimensionnel (soit ligne, soit colonne), Grid est parfait pour la structure globale d'une page (header, sidebar, main content, footer).

Pensez à Grid comme à un tableau ou une grille de votre maison, où vous définissez des zones pour chaque pièce.

1.2 Conteneur de Grille et Éléments de Grille

Comme Flexbox, Grid fonctionne avec un conteneur de grille (le parent) et des éléments de grille (ses enfants directs).

<div class="grid-container"> <!-- Conteneur de Grille -->
    <div class="grid-item">Header</div> <!-- Élément de Grille -->
    <div class="grid-item">Sidebar</div>
    <div class="grid-item">Main Content</div>
    <div class="grid-item">Footer</div>
</div>

.grid-container {
    display: grid; /* Transforme l'élément en conteneur de grille */
    background-color: #F0F8FF; /* Pour visualiser le conteneur */
    padding: 15px;
    border: 1px solid #A5B4FC;
}
.grid-item {
    background-color: #BFDBFE; /* Pour visualiser les éléments */
    padding: 10px;
    border: 1px solid #60A5FA;
    margin: 5px;
}

1.3 Définir la Grille (Propriétés du Conteneur de Grille)

Ces propriétés sont appliquées au conteneur de grille pour définir sa structure.

• grid-template-columns: Définit le nombre et la largeur des colonnes.
  • Ex: grid-template-columns: 100px 1fr 2fr; (une colonne de 100px, une colonne flexible 1 part, une colonne flexible 2 parts).
  • L'unité fr (fraction) est une unité flexible qui représente une fraction de l'espace disponible.
  • Vous pouvez utiliser repeat(): grid-template-columns: repeat(3, 1fr); (trois colonnes de taille égale).
  • minmax(): grid-template-columns: minmax(100px, 1fr) 200px; (la première colonne sera au minimum 100px, sinon prendra 1 part de l'espace restant, la deuxième fait 200px).
• grid-template-rows: Définit le nombre et la hauteur des lignes. Fonctionne comme grid-template-columns
  • Ex: grid-template-rows: auto 100px; (une ligne de hauteur automatique, une ligne de 100px).
• gap, row-gap, column-gap: Définit l'espacement entre les cellules de la grille.
  • Ex: gap: 20px; ou row-gap: 10px; column-gap: 20px;
• justify-items: Aligne le contenu dans les cellules le long de l'axe des lignes (horizontalement).
  • Valeurs: start, end, center, stretch (défaut).
• align-items: Aligne le contenu dans les cellules le long de l'axe des colonnes (verticalement).
  • Valeurs: start, end, center, stretch (défaut).
• justify-content: Aligne la grille entière dans le conteneur de grille le long de l'axe des lignes (horizontalement), si la grille est plus petite que son conteneur.
  • Valeurs: start, end, center, space-between, space-around, space-evenly.
• align-content: Aligne la grille entière dans le conteneur de grille le long de l'axe des colonnes (verticalement), si la grille est plus petite que son conteneur.
  • Valeurs: start, end, center, space-between, space-around, space-evenly.
• grid-template-areas: Permet de nommer des zones dans la grille pour un placement plus lisible des éléments.
  • Ex: grid-template-areas: "header header" "nav main" "footer footer";

1.4 Placer les Éléments (Propriétés des Éléments de Grille)

Ces propriétés sont appliquées aux éléments de grille (les enfants directs du conteneur de grille) pour les positionner.

• grid-column-start, grid-column-end: Définit la ligne de début et de fin pour la colonne de l'élément.
  • Ex: grid-column-start: 1; grid-column-end: 3; (s'étend de la ligne 1 à la ligne 3 des colonnes).
• grid-column: Raccourci pour grid-column-start et grid-column-end.
  • Ex: grid-column: 1 / 3; (idem).
  • Vous pouvez utiliser span pour définir l'étendue: grid-column: span 2; (l'élément s'étend sur 2 colonnes).
• grid-row-start, grid-row-end: Définit la ligne de début et de fin pour la ligne de l'élément. Fonctionne comme grid-column-start/end.
• grid-row: Raccourci pour grid-row-start et grid-row-end.
  • Ex: grid-row: 2 / span 2; (commence à la ligne 2 et s'étend sur 2 lignes).
• grid-area: Permet de placer un élément en lui attribuant un nom défini dans grid-template-areas ou d'agir comme un raccourci pour les propriétés grid-row-start / grid-column-start / grid-row-end / grid-column-end.
  • Ex (avec grid-template-areas): grid-area: header;
  • Ex (raccourci): grid-area: 1 / 1 / 3 / 2; (row-start / column-start / row-end / column-end).
• justify-self: Aligne l'élément lui-même dans sa cellule le long de l'axe des lignes (horizontalement), surchargeant justify-items du parent.
  • Valeurs: start, end, center, stretch (défaut).
• align-self: Aligne l'élément lui-même dans sa cellule le long de l'axe des colonnes (verticalement), surchargeant align-items du parent.
  • Valeurs: start, end, center, stretch (défaut).

1.5 Introduction au Responsive Design et Media Queries (Rappel)

Le Responsive Design est une approche de conception web qui vise à créer des sites web offrant une expérience de visualisation optimale sur une large gamme d'appareils (des ordinateurs de bureau aux téléphones mobiles), en s'adaptant à la taille de l'écran.

Les Media Queries sont la pierre angulaire du Responsive Design. Elles permettent d'appliquer des styles CSS différents en fonction des caractéristiques de l'appareil utilisé par l'utilisateur (largeur de l'écran, hauteur, orientation, etc.).

1.5.1 Concept de Mobile-First

La stratégie Mobile-First consiste à concevoir et développer d'abord pour les petits écrans (mobiles), puis à ajouter progressivement des styles pour les écrans plus grands. C'est une bonne pratique car elle garantit que le site est fonctionnel et rapide sur mobile, et elle simplifie souvent le code CSS.

1.5.2 Syntaxe de Base des Media Queries

Une Media Query commence par @media, suivie du type de média (souvent screen pour les écrans) et d'une ou plusieurs conditions entre parenthèses. Les styles à l'intérieur des accolades ne s'appliquent que si les conditions sont remplies.

/* Styles par défaut (pour mobile d'abord) */
body {
    background-color: lightcoral;
}

/* Styles pour les écrans d'une largeur minimale de 768px (tablettes et plus) */
@media screen and (min-width: 768px) {
    body {
        background-color: lightblue; /* Le fond devient bleu sur les écrans plus grands */
    }
}

/* Styles pour les écrans d'une largeur maximale de 600px (petits mobiles) */
@media screen and (max-width: 600px) {
    h1 {
        font-size: 1.5em; /* La taille du titre diminue sur les petits écrans */
    }
}

• min-width : Les styles s'appliquent si la largeur de l'écran est supérieure ou égale à la valeur spécifiée.
• max-width : Les styles s'appliquent si la largeur de l'écran est inférieure ou égale à la valeur spécifiée.

2. Exercices d'Application

Pour chaque exercice, créez un nouveau fichier HTML et CSS (ou continuez sur les fichiers des séances précédentes si vous le souhaitez, en les organisant bien). N'oubliez pas de lier votre fichier CSS dans le <head> de votre HTML.

Exercice 1 : Grille Basique à 3 Colonnes

• Créez une page HTML avec un conteneur de grille et six éléments enfants.
• Dans votre CSS, transformez le conteneur en grille (display: grid;).
• Définissez la grille pour avoir trois colonnes de taille égale (grid-template-columns: repeat(3, 1fr);).
• Ajoutez un espacement de 20px entre les colonnes et les lignes (gap: 20px;).
• Donnez des styles visuels aux éléments pour bien les distinguer (bordure, couleur de fond).

Exercice 2 : Grille avec Zones Nommées

• Créez une page avec une structure de page classique : un en-tête, une navigation latérale, un contenu principal et un pied de page.
• Utilisez un conteneur de grille.
• Définissez une grille avec deux colonnes (ex: 1fr pour la nav, 3fr pour le contenu) et trois lignes (header, main/nav, footer).
• Utilisez grid-template-areas pour nommer les zones : header, nav, main, footer.
• Positionnez chaque élément de la page (<header>, <nav>, <main>, <footer>) dans la zone appropriée à l'aide de la propriété grid-area.

Exercice 3 : Grille Réactive (Introduction aux Media Queries avec Grid)

• Reprenez l'Exercice 1.
• Par défaut (pour mobile), la grille doit avoir une seule colonne.
• Utilisez une Media Query (ex: @media screen and (min-width: 768px)) pour que sur les écrans plus larges, la grille passe à trois colonnes.
• Testez en redimensionnant la fenêtre de votre navigateur.

Exercice 4 : Grille pour une Galerie d'Images

• Créez une galerie d'images simple.
• Utilisez un conteneur de grille.
• Placez au moins 5 images (<img>) comme éléments de grille.
• Définissez la grille pour créer des colonnes répétitives, en utilisant repeat(auto-fit, minmax(200px, 1fr)) pour que les images s'ajustent automatiquement et aient une largeur minimale de 200px.
• Certaines images devraient s'étendre sur plusieurs colonnes ou lignes (grid-column: span 2; ou grid-row: span 2;) pour créer un effet de mosaïque.

3. TP : Création d'un Layout de Page Complexe avec le Design System

Pour ce TP, vous allez utiliser CSS Grid pour construire la structure principale d'une page web complète, en intégrant notre Design System.

Objectif :

Concevoir un layout de page qui inclut un en-tête, une navigation latérale (sidebar), un contenu principal, et un pied de page, en utilisant les puissantes capacités de positionnement de CSS Grid et en respectant notre Design System.

Consignes :

1. Créez un nouveau dossier tp-seance4-grid avec index.html et styles.css.
2. Dans index.html, créez la structure sémantique suivante à l'intérieur d'un conteneur principal (<div class="page-layout">) :
   • <header> pour l'en-tête du site.
   • <aside> pour une barre latérale.
   • <main> pour le contenu principal.
   • <footer> pour le pied de page.
3. Dans votre styles.css :
   • Appliquez box-sizing: border-box; universellement.
   • Utilisation du Design System : Pour toutes les couleurs, espacements, tailles de police et ombres, utilisez les variables CSS de notre styles.css global (ex: var(--color-primary), var(--space-4), var(--font-size-base), var(--shadow-md)).
   • Conteneur de la page (.page-layout) :
     • Définissez-le comme un conteneur de grille (display: grid;).
     • Définissez la structure de la grille pour les écrans de bureau :
       • Trois lignes : header, main/aside, footer.
       • Deux colonnes : aside et main content.
       • Utilisez grid-template-areas pour nommer les zones (ex: "header header" "aside main" "footer footer").
     • Ajustez la hauteur des lignes (ex: grid-template-rows: auto 1fr auto;) et la largeur des colonnes (ex: grid-template-columns: 200px 1fr;).
     • Ajoutez un gap (espacement) entre les éléments de la grille.
   • Positionnement des éléments :
     • Appliquez la propriété grid-area à chaque balise sémantique (header, aside, main, footer) pour les placer dans les zones nommées correspondantes (ex: header { grid-area: header; }).
   • Styles visuels :
     • Donnez des couleurs de fond différentes et des paddings à chaque section (header, aside, main, footer) pour bien visualiser la mise en page.
     • Assurez-vous que le texte est lisible.
   • Adaptation Mobile (Responsive) :
     • Utilisez une Media Query (ex: @media screen and (max-width: 767px)) pour modifier la structure de la grille sur les petits écrans.
     • Sur mobile, la grille doit passer à une seule colonne, où les éléments s'empilent dans un ordre logique (header, main, aside, footer).
       • Ex: grid-template-areas: "header" "main" "aside" "footer";
       • Et grid-template-columns: 1fr;
       • Vous devrez peut-être ajuster grid-template-rows également.
4. Vérification : Ouvrez votre index.html dans le navigateur. Redimensionnez la fenêtre pour observer comment le layout de la page se transforme entre le mode bureau et le mode mobile. Utilisez l'inspecteur d'éléments pour vérifier les propriétés Grid appliquées.