Függőleges margók a CSS csempézéshez

Most adjunk hozzá függőleges margókat is. Ehhez minden gyermekelemnek beállítjuk a margin-bottom értékét 10px-ra:

<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;
}

Amint látjuk, minden jól működik, kivéve, hogy az utolsó sor margóval van elválasztva a szülőtől. Legtöbbször ez nem kritikus.

Készítsen kételemből álló csempesorokat 20px távolsággal az elemek között.

Készítsen háromelemből álló csempesorokat 20px távolsággal az elemek között.

Készítsen négyelemből álló csempesorokat 20px távolsággal az elemek között.