Vertikala marginaler för CSS-rutor

Låt oss nu lägga till vertikala marginaler också. För att göra detta sätter vi margin-bottom till 10px för alla underordnade element:

<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 fungerar allt bra, med undantag för att den sista raden har marginal från föräldern. Oftast är detta inte kritiskt.

Skapa en ruta med två element per rad med ett avstånd mellan elementen på 20px.

Skapa en ruta med tre element per rad med ett avstånd mellan elementen på 20px.

Skapa en ruta med fyra element per rad med ett avstånd mellan elementen på 20px.