Combien de colonnes ? — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 8)

Combien de colonnes ?

Grid · niveau 2

Énoncé

Un conteneur de 1000 pixels contient quatre éléments. Ses gouttières mesurent 20 pixels. Pour chacune des deux déclarations, dire combien de colonnes sont créées, combien sont visibles et quelle est leur largeur :

grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) ;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)).

Que se passe-t-il si le conteneur contient sept éléments ?

Corrigé

Il faut $180 n + 20 (n - 1) \leq 1000$ , soit $200 n \leq 1020$ : $n = 5$ colonnes sont créées dans les deux cas.

auto-fill : les cinq colonnes restent, chacune de $(1000 - 4 \times 20) /5 = 184$ pixels ; les quatre éléments occupent les quatre premières, la cinquième est vide.
auto-fit : la colonne vide est effondrée, ainsi que sa gouttière ; quatre colonnes de $(1000 - 3 \times 20) /4 = 235$ pixels. Chromium affiche d'ailleurs 235px 235px 235px 235px 0px : la piste existe toujours, mais avec une largeur nulle.

Avec sept éléments, la première rangée est pleine (cinq éléments) et la deuxième en contient deux : aucune colonne n'est vide, les deux déclarations donnent cinq colonnes de 184 pixels.