Grid Layout > Structure en pratique

Utiliser des valeurs minimales et maximales

[containeur] display: grid au containeur
Largeur exprimée cette fois en % (80%).
La largeur de ce conteneur est de 80 % de la largeur de son parent, soit l’élément "body" dans cet exemple.
[containeur] grid-template-columns: 300px 1fr 1fr;
La première colonne a une largeur fixe de 300 pixels, la deuxième et la troisième occupent respectivement une fraction de la place disponible restante.
Selon la largeur de l'écran, les deux dernières colonnes peuvent être très fortement réduites.
[containeur] grid-template-columns: 300px minmax(200px,1fr) 1fr;
La valeur-fonction minmax() va permettre de spécifier une valeur minimale et une valeur maximale que le navigateur ne devra pas dépasser. La première valeur indique la largeur minimale et la deuxième valeur spécifie la largeur maximale.
La valeur minimale pour la largeur de la 2ème colonne est fixée à 200 pixels et ne sera jamais diminuée en dessous, même si la largeur disponible est très réduite. La valeur maximale utilisera une fraction de la place disponible. Elle sera donc relative en fonction de la largeur disponible.