Grid Layout > Structure en pratique
Insérer des gouttières
- 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,1fr);
[containeur] row-gap: 10px;
- = gouttières horizontales
Par défaut a une valeur de 0px - supporte des largeurs exprimées avec les unités px, em, %
- [containeur] column-gap: 2%;
- = gouttières verticales
Par défaut a une valeur de 0px - supporte des largeurs exprimées avec les unités px, em, %
- [containeur] gap: 20px;
- = syntaxe raccourcie
Notez bien que les dimensions du conteneur de grille parent ne sont pas changées par l’utilisation des gouttières. La largeur du conteneur est toujours de 800 pixels dans cet exemple.