Espacement

Les gouttieres permettent d'imposer une taille de separation entre les blocs.

Mais comment les blocs se positionnent si le parent est plus grand que l'ensemble de ses enfants.

Les propriétés justify-content et align-content permettent de préciser l'espacement.

Prenons l'exemple suivant :

1
<main>
2
  <div id="div1">
3
    Contenu 1
4
  </div>
5
  <div id="div2">
6
    Contenu 2
7
  </div>
8
  <div id="div3">
9
    Contenu 3
10
  </div>
11
  ...
12
  <div id="div9">
13
    Contenu 9
14
  </div>
15
</main>
1
main {
2
    display : grid;
3
    grid-template-columns: repeat(3, 100px);
4
    grid-auto-rows: 100px;
5
    width: 400px;
6
    height: 400px;
7
}
Grille

Définitionjustify-content

justify-content permet de répartir les blocs selon l'axe horizontal.

justify-content: start : blocs groupés au début

justify-content : start

justify-content: center : blocs groupés au centre

justify-content : center

justify-content: end : blocs groupés à la fin

justify-content : end

justify-content: space-between : blocs distribués équitablement, premier au début, dernier à la fin.

justify-content : space-between

justify-content: space-around : blocs distribués équitablement, premier et dernier seulement la moitié de l'espace.

justify-content : space-around

justify-content: space-evenly : blocs distribués équitablement.

justify-content : space-evenly

Définitionalign-content

align-content permet de répartir les blocs selon l'axe vertical.

align-content: start : blocs groupés au début

align-content: center : blocs groupés au centre

align-content: end : blocs groupés à la fin

align-content: space-between : blocs distribués équitablement, premier au début, dernier à la fin.

align-content: space-around : blocs distribués équitablement, premier et dernier seulement la moitié de l'espace.

align-content: space-evenly : blocs distribués équitablement.