La grille qui s'adapte toute seule

🎯 Objectif

Arrêter de décider du nombre de colonnes. Une formule le fait mieux que toi, sur tous les écrans à la fois.

📖 Exemple

Le catalogue de la ludothèque ne compte pas ses colonnes — une formule s'en charge :

<div class="catalogue">
    <div class="jeu">Dames</div>
    <div class="jeu">Échecs</div>
    <div class="jeu">Tarot</div>
    <div class="jeu">Uno</div>
    <div class="jeu">Skyjo</div>
    <div class="jeu">Yatzy</div>
</div>

.catalogue {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

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

Compte les colonnes dans la fenêtre ci-dessus : personne ne les a écrites. La fenêtre est étroite, la formule y case ce qu'elle peut — sur un grand écran, elle en caserait davantage, avec le même code. Décortiquée, elle se lit comme une phrase :

Pourquoi deux bornes ? Sans le plancher, les colonnes se comprimeraient jusqu'à l'illisible — y compris pour ceux qui agrandissent le texte de leur navigateur à 200 %. Sans le plafond d'une part égale, elles resteraient figées à leur minimum et laisseraient un trou disgracieux à droite de chaque ligne. Avec les deux, une seule déclaration fait le travail à toutes les largeurs d'écran — tu verras au prochain exercice ce qu'il faudrait écrire sans elle.

📝 Consigne

Ta grille de l'exercice 11.1 a un défaut : elle impose trois colonnes, partout. Sur l'aperçu — qui a la largeur d'un téléphone — chaque colonne tombe à une centaine de pixels et les titres se cassent sur trois lignes.

Dans l'onglet CSS, remplace toute la valeur de grid-template-columns par la formule de l'exemple, avec d'autres nombres :

1. la fonction repeat, avec le mot-clé auto-fill en premier argument
2. en second argument, la fonction minmax avec un plancher de 150 pixels et un plafond d'une part égale
3. referme les deux parenthèses avant le point-virgule

Ne touche à rien d'autre : le mode grille et la gouttière restent en place.