PhpBB Lab Académie

Comprendre repeat, minmax et auto-fit sur les deux notes, puis utiliser min pour éviter qu’une largeur minimale fixe dépasse un conteneur très étroit.

Ne pas imposer deux colonnes sur toutes les largeurs

La grille contient toujours les mêmes deux notes. Nous allons laisser chacune disposer de suffisamment d’espace, quitte à les empiler lorsque la fenêtre se rétrécit.

Le HTML ne change pas. Toutes les expériences concernent la valeur de grid-template-columns dans .grille-notes. Remplacez cette valeur au même endroit à chaque étape.

1. Repeat évite une répétition

repeat(2, 1fr) répète deux fois le modèle 1fr. Il est équivalent ici à 1fr 1fr. La virgule sépare le nombre de répétitions du modèle répété ; les parenthèses contiennent ces arguments.

Cette écriture simplifie le code mais conserve exactement deux colonnes. Elle ne les rend pas encore adaptables.

2. Minmax définit les limites d’une piste

minmax(16rem, 1fr) donne à une colonne un minimum de 16rem et un maximum flexible exprimé en fr. 1fr n’est pas une largeur fixe ; la piste peut grandir en partageant l’espace disponible.

Le minimum de 16rem est une contrainte réelle, pas un simple souhait que Grid pourrait ignorer. Avec repeat(2, minmax(16rem, 1fr)), deux colonnes et le gap nécessitent au moins 33rem. Essayez brièvement cette valeur pour comprendre la limite.

3. Auto-fit adapte le nombre de pistes

Remplacez le nombre 2 par auto-fit : repeat(auto-fit, minmax(16rem, 1fr)). Le navigateur crée autant de colonnes que la place le permet, puis les pistes restées vides sont repliées. Nos deux notes peuvent donc partager la largeur disponible sans laisser des colonnes vides à côté.

Lorsque deux colonnes ne tiennent plus, les notes passent sur deux lignes. L’ordre Ma première page complète puis Mon formulaire de contact ne change pas.

4. Corriger aussi le cas inférieur à 16rem

Même avec une seule colonne, un minimum fixe de 16rem peut dépasser un conteneur plus étroit. Auto-fit ne supprime pas cette contrainte. Nous découvrons donc min(), une fonction qui retient la plus petite des valeurs comparées.

min(16rem, 100%) vaut 16rem lorsque le conteneur est assez large, et 100% de ce conteneur s’il est plus étroit. Placée comme minimum de minmax, elle permet à la piste de rétrécir davantage sans conserver un minimum supérieur au conteneur.

L’écriture finale est :

grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));

Lisez de l’intérieur vers l’extérieur : minimum plafonné à la largeur du conteneur ; piste flexible ; répétition automatique. Chaque appel a sa fermeture : min se ferme après 100%, puis minmax et repeat se ferment après 1fr.

5. Tester les deux notes, pas un nombre inventé de cartes

Sur une grande largeur, nos deux articles peuvent être côte à côte. Sur une petite largeur, ils peuvent être empilés. Avec seulement deux articles, nous n’attendons jamais quatre cartes.

Réduisez encore la fenêtre et augmentez le texte. La piste peut rétrécir sous 16rem ; un contenu intérieur qui ne peut pas revenir à la ligne pourrait cependant encore déborder. Le chapitre responsive apprendra à vérifier le contenu réel, pas seulement la formule de colonnes.

À la fin, conservez la formule avec min, et non l’étape intermédiaire à minimum fixe.

Référence technique, pour approfondir

W3C — Répétition automatique des pistes Grid
W3C — Fonctions de comparaison min et max

Évolution de la même propriété :

grid-template-columns: repeat(2, 1fr);

Puis, après compréhension des limites :

.grille-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: 1rem;
}

Les deux articles restent ceux de la section Mes notes de progression.

Étape 1

Remplacez 1fr 1fr par repeat(2, 1fr). Vérifiez que la grille est équivalente.

Étape 2

Testez repeat(2, minmax(16rem, 1fr)). Calculez la largeur minimale nécessaire avec le gap de 1rem.

Étape 3

Testez repeat(auto-fit, minmax(16rem, 1fr)), puis réduisez la fenêtre pour observer les deux notes sur deux lignes.

Étape 4

Remplacez le minimum fixe par min(16rem, 100%) pour obtenir la formule finale de la leçon.

Étape 5

Testez une largeur très petite et le zoom. Expliquez pourquoi auto-fit seul n’aurait pas supprimé un minimum trop grand.

Repeat répète ; minmax définit des limites ; auto-fit adapte les pistes et replie celles qui restent vides. Min rend le minimum lui-même adaptable. Les deux notes peuvent changer de disposition sans changer d’ordre.