Grid Layout > Structure en pratique
Utiliser l’unité fraction
- 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
- = contexte de grille de mise en page
- [containeur] grid-template-columns: 200px 30% 1fr;
- Dans le cas de grilles complexes avec beaucoup de colonnes et d’unités différentes, il peut être très fastidieux de calculer la somme de toutes les valeurs et faire en sorte que cette somme fasse bien la largeur totale du conteneur parent.
La valeur 1fr
veut dire que la largeur est égale à une fraction de la largeur disponible.
Ex : grid-template-columns: 2fr 1fr 1fr;
La première colonne occupe deux fractions de la largeur disponible, soit 400 pixels. Les deux autres colonnes occupent une fraction de la place disponible restante, soit 200 pixels chacune.