Grid Layout > Structure en pratique
Utiliser des valeurs répétées
- 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...
- Sept. Duis mollis, est non commodo luctus...
- Huit. Maecenas faucibus mollis interdum...
- [containeur] display: grid au containeur
- Largeur exprimée de 80%
- [containeur] grid-template-columns: repeat(4,200px);
- Le premier paramètre de la valeur-fonction repeat() est le nombre de colonnes voulu. Dans cet exemple, c’est 4. Le second paramètre est la largeur commune voulue. Dans cet exemple, c’est 200px. Vous pouvez bien sûr utiliser des valeurs fixes et relatives.
grid-template-columns: 300px repeat(3,1fr);
La première colonne a une largeur fixe de 300 pixels. Les trois autres colonnes occupent chacune une fraction de l’espace disponible restant