Grid et écrans de toutes tailles

Grid : lignes ET colonnes

.galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* trois colonnes égales */
    gap: 12px;
}

fr est une fraction de l'espace disponible : 1fr 2fr donne une colonne deux fois plus large que l'autre. repeat(3, 1fr) s'écrit aussi 1fr 1fr 1fr. Flexbox range sur une ligne ; Grid organise en lignes et en colonnes.

Les media queries

Une règle placée dans @media ne s'applique que si l'écran remplit la condition :

.galerie {
    grid-template-columns: 1fr;               /* téléphone : une colonne */
}

@media (min-width: 600px) {
    .galerie {
        grid-template-columns: repeat(3, 1fr); /* à partir de 600px : trois */
    }
}

C'est l'approche mobile d'abord : le style de base vise les petits écrans, et les media queries min-width ajoutent pour les grands. min-width: 600px est vraie à partir de 600px inclus ; max-width: 600px, jusqu'à 600px inclus. À la frontière exacte, le choix entre les deux compte.

N'oubliez pas <meta name="viewport" ...> dans le HTML : sans lui, un téléphone affiche la page comme sur un écran d'ordinateur, en miniature, et les media queries ne servent à rien.

2 exercices pour cette lecon

Les exercices demandent un compte : il faut bien enregistrer votre progression quelque part. La lecture, elle, reste libre. Creer un compte

La galerie moyen lecon a valider
Une colonne sur téléphone difficile lecon a valider