CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 9 · Exercice de TD

Une grille sans requête média

Responsive design · niveau 2

Énoncé

Trois listes de cinq livres ont pour largeur 200, 500 et 1000 pixels, et la même règle :


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

Calculer le nombre et la largeur des colonnes de chaque liste. Que se passerait-il pour la première si l'on écrivait minmax(14rem, 1fr) ?

Corrigé

min(14rem, 100%) vaut 224 pixels, sauf si la liste est plus étroite. Il tient $n$ colonnes si $224 n + 16 (n - 1) \leq L$ .

$L = 200$ : min(224px, 200px) vaut 200 ; une seule colonne de 200 pixels.
$L = 500$ : $240 n \leq 516$ donne $n = 2$ , de $(500 - 16) /2 = 242$ pixels.
$L = 1000$ : $240 n \leq 1016$ donne $n = 4$ , de $(1000 - 48) /4 = 238$ pixels.

Chromium calcule 200px, 242px 242px et quatre colonnes de 238px. Avec minmax(14rem, 1fr), la première liste aurait une colonne de 224 pixels dans 200 pixels : les cartes déborderaient de 24 pixels, et la page défilerait horizontalement sur un très petit écran.

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →