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