Exercices

Voici quelques énoncés d'exercices avec les grid pour vous pratiquer.

1. Mise en page de base

Objectif : Découvrir la syntaxe de grid-template-columns et gap.

Énoncé :

• Crée une page avec 6 div de couleur différente.
• Donne une hauteur et une largeur aux div pour les voir dans le navigateur.
• Place-les dans une grille de 3 colonnes.
• Ajoute un gap de 2rem entre les cases.

Résultat attendu : une grille simple de 2 rangées × 3 colonnes.

2. Grille avec zones

Objectif : Apprendre grid-template-areas.

Énoncé :

• Crée une page avec 4 sections : header, nav, main, footer.

• Utilise grid-template-areas pour obtenir la disposition suivante :

  

• Donne à chaque section une couleur différente pour bien visualiser la disposition.

3. Grille réactive

Objectif : Utiliser les media queries avec Grid.

Énoncé:

• Crée une grille avec 8 éléments.
• Sur les petits mobiles, affiche les éléments en 1 seule colonne.
• Sur les écrans moyens (600px et plus), affiche-les en 2 colonnes.
• Sur les grands écrans (900px et plus), affiche-les en 4 colonnes.

4. Manipulation de l'ordre

Objectif : Réorganiser les éléments avec Grid.

Énoncé :

• Crée une page avec 5 sections : header, menu, main, aside, footer.
• Sur mobile, affiche uniquement menu, main, footer en colonne.
• Sur écran medium (600px et plus), affiche-les tous en une seule colonne, dans cet ordre : menu, header, main, aside, footer.

• Sur un grand écran, affiche-les comme suit :