Grille avec des espacements corrects en CSS
Créons une grille fonctionnelle vraiment sans problème avec des espacements basés sur les marges. Supposons que nous ayons initialement une telle grille sans espacements :
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
width: 300px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Créons des espacements horizontaux entre
les éléments avec la propriété margin.
Pour cela, définissons pour tous les éléments enfants
margin-right à la valeur 10px,
et pour chaque troisième enfant, remettons à zéro cette margin.
Utilisons pour cela la pseudo-classe nth-child,
en paramétrant pour cibler
chaque troisième élément.
Augmentons également la largeur du parent à 320px,
pour faire de la place pour les espacements, et regardons
ce que nous obtenons :
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
width: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
margin-right: 10px;
border: 1px solid green;
}
.child:nth-child(3n) {
margin-right: 0;
}
:
Ainsi, tout fonctionne. Supprimons le dernier élément, pour qu'il y ait moins d'éléments dans la dernière ligne et assurons-nous que nous n'ayons aucun problème avec cette dernière ligne :
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
width: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
margin-right: 10px;
border: 1px solid green;
}
.child:nth-child(3n) {
margin-right: 0;
}
:
Créez une grille de deux éléments par ligne avec
une distance entre les éléments de 20px.
