Grid Layout > Structure en pratique

Insérer des gouttières

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