Вертикални отстои за плочки во CSS

Ајде сега да додадеме и вертикални отстои. За да го направиме ова, ќе доделиме margin-bottom со вредност од 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;
}

Како што гледаме, сè работи добро, освен тоа што последниот ред е оддалечен од родителот. Најчесто ова не е критично.

Направете плочка по два елементи во ред со растојание помеѓу елементите од 20px.

Направете плочка по три елементи во ред со растојание помеѓу елементите од 20px.

Направете плочка по четири елементи во ред со растојание помеѓу елементите од 20px.