B. Comment fonctionne CSS Grid Layout ?

Le fonctionnement repose sur deux éléments clés :

1. 
   – Le conteneur de grille (display: grid ou display: inline-grid)
2. – Les éléments enfants positionnés dans la grille (grid-items)

Exemple basique :

css

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto; gap: 20px;
}

Ce code crée une grille CSS à 3 colonnes de largeur égale (1fr = 1 fraction) et autant de lignes que nécessaire, avec un espacement (gap) de 20px entre les cellules.

C. Propriétés CSS les plus utilisées avec Grid Layout

Voici les principales propriétés CSS pour maîtriser Grid Layout :

Propriété	Fonction
display: grid	Active le système de grille
grid-template-columns	Définit le nombre et la taille des colonnes
grid-template-rows	Définit le nombre et la hauteur des lignes
grid-column-start / end	Place un élément sur des colonnes spécifiques
grid-row-start / end	Place un élément sur des lignes spécifiques
grid-area	Définit une zone nommée pour un positionnement plus lisible
gap / row-gap / column-gap	Gère l’espacement entre les cellules
grid-template-areas	Permet une mise en page via des noms de zones
grid-auto-flow	Définit l’ordre de placement automatique des éléments

D. Pourquoi utiliser Grid Layout ?

✅ Avantages :

• 
  – Création de mises en page complexes avec peu de code
• – Alignement précis des éléments HTML sur deux axes (horizontal + vertical)
• – Adapté aux sites responsives, surtout avec minmax() ou auto-fill
• – Lecture du code facilitée grâce aux zones (grid-template-areas)
• – Compatible avec la plupart des navigateurs modernes (Chrome, Firefox, Safari, Edge)

❌ Limites :

• 
  – Nécessite un bon niveau de compréhension de CSS
• – Moins adapté aux listes dynamiques à une seule dimension (préférer Flexbox dans ce cas)

E. Exemple de mise en page avec Grid Layout

html

<div class="grid">
<header>Header</header>
<aside>Sidebar</aside>
<main>Content</main>
<footer>Footer</footer>
</div>

css

.grid {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 1fr 3fr;
grid-gap: 10px;
}


header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: content; }
footer { grid-area: footer; }

Ce système de grille CSS définit une structure de page avec une barre latérale, un contenu principal, un en-tête et un pied de page.

F. Ressources utiles pour apprendre CSS Grid

• – Outils de visualisation de grilles comme Firefox DevTools
  – MDN Web Docs – CSS Grid Layout
  – CodePen pour tester vos grilles en ligne
  – CSS Tricks – A Complete Guide to Grid