# 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.