Κάθετες προσαυξήσεις για πλακίδια στο 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.