Les gouttières

Les gouttières correspondent à la largeur des lignes intérieures. C'est à dire l'espace entre les différents blocs.

DéfinitionLargeur des lignes verticales

column-gap

1
main {
2
									display: grid;
3
									grid-template-columns: repeat(3, 100px);
4
									grid-auto-rows: 100px;
5
									column-gap: 10px;
6
									}
Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
gap

DéfinitionLargeur des lignes horizontales

row-gap

1
main {
2
									display: grid;
3
									grid-template-columns: repeat(3, 100px);
4
									grid-auto-rows: 100px;
5
									row-gap: 10px;
6
									}
Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
gap

DéfinitionCombinaison

gap

1
main {
2
									display: grid;
3
									grid-template-columns: repeat(3, 100px);
4
									grid-auto-rows: 100px;
5
									gap: 10px;
6
									}

10px verticalement et horizontalement

Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
gap
1
main {
2
									display: grid;
3
									grid-template-columns: repeat(3, 100px);
4
									grid-auto-rows: 100px;
5
									gap: 10px 20px;
6
									}

10px horizontalement et 20px verticalement

Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
gap