Espacement [CSS (Cascading Style Sheet)]

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 :

<main>
									<div id="div1">
									Contenu 1
									</div>
									<div id="div2">
									Contenu 2
									</div>
									<div id="div3">
									Contenu 3
									</div>
									...
									<div id="div9">
									Contenu 9
									</div>
									</main>

<main>
									<div id="div1">
									Contenu 1
									</div>
									<div id="div2">
									Contenu 2
									</div>
									<div id="div3">
									Contenu 3
									</div>
									...
									<div id="div9">
									Contenu 9
									</div>
									</main>

main {
									display : grid;
									grid-template-columns: repeat(3, 100px);
									grid-auto-rows: 100px;
									width: 400px;
									height: 400px;
									}

main {
									display : grid;
									grid-template-columns: repeat(3, 100px);
									grid-auto-rows: 100px;
									width: 400px;
									height: 400px;
									}