Grid Layout > Structure en pratique
Utiliser des valeurs minimales et maximales
- Un. Maecenas faucibus mollis interdum...
- Deux. Fusce dapibus, tellus ac cursus commodo...
- Trois. Duis mollis, est non commodo luctus...
- Quatre. Nulla vitae elit libero, a pharetra augue...
- Cinq. Cras Parturient Dolor Magna. Vestibulum id
ligula...
- Six. Vestibulum id ligula porta felis euismod semper...
- [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.