Ta première grille

🎯 Objectif

Transformer des blocs empilés en une vraie grille de colonnes. Trois déclarations, sur le conteneur, et rien d'autre.

📖 Exemple

Le club de dessin expose quatre œuvres. Deux valeurs, donc deux colonnes :

<div class="vitrine">
    <div class="oeuvre">Fusain de Léa</div>
    <div class="oeuvre">Aquarelle de Noé</div>
    <div class="oeuvre">Pastel d'Emma</div>
    <div class="oeuvre">Encre de Sam</div>
</div>

.vitrine {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.oeuvre {
    padding: 16px 8px;
    border: 2px solid #d45e95;
    background-color: #ffffff;
    text-align: center;
}

Pourquoi ça marche : tout se passe sur le conteneur, comme en Flexbox au module 9. La première déclaration allume le mode grille sur .vitrine — ses enfants deviennent des cases, sans qu'on leur écrive une seule ligne. La deuxième se lit en comptant : une valeur par colonne — deux valeurs, deux colonnes. Et l'unité fr ne mesure pas, elle partage : chaque colonne prend une part égale de la place, sur un téléphone comme sur un écran de bureau. La troisième pose la gouttière entre les cases, dans les deux sens, jamais sur les bords.

📝 Consigne

Même mécanique, autre grille : les six photos du club s'empilent l'une sous l'autre, pleine largeur. Dans l'onglet CSS, ajoute trois déclarations à la règle .galerie { }, dans cet ordre — et regarde l'aperçu après chacune :

1. la déclaration qui passe le conteneur en mode grille
2. des colonnes en exactement trois parts égales — trois fois l'unité de partage, séparées par des espaces, sans virgule (grid-template-columns)
3. une gouttière de 12 pixels entre les cases (gap)