Pystysuorat marginaalit laatoituksessa CSS:ssä

Lisätään nyt myös pystysuoria marginaaleja. Tehdään tämä asettamalla kaikille lapsielementeille margin-bottom arvoksi 10px:

<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;
	margin-bottom: 10px;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

Kuten näemme, kaikki toimii hyvin, lukuun ottamatta sitä, että viimeinen rivi on erotettu vanhemmastaan. Useimmiten tämä ei ole kriittistä.

Tee laatoitus, jossa on kaksi elementtiä per rivi ja elementtien välinen etäisyys on 20px.

Tee laatoitus, jossa on kolme elementtiä per rivi ja elementtien välinen etäisyys on 20px.

Tee laatoitus, jossa on neljä elementtiä per rivi ja elementtien välinen etäisyys on 20px.