Vertikale marginer for fliser i CSS

La oss nå legge til vertikale marginer. For å gjøre dette, tilordner vi margin-bottom med en verdi på 10px til alle underordnede elementer:

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

Som vi ser, fungerer alt bra, bortsett fra at den siste raden har margin fra forelderen. Oftest er dette ikke kritisk.

Lag en fliserad med to elementer per rad med avstand mellom elementene på 20px.

Lag en fliserad med tre elementer per rad med avstand mellom elementene på 20px.

Lag en fliserad med fire elementer per rad med avstand mellom elementene på 20px.