Πλακίδια με σωστά περιθώρια στο CSS

Ας φτιάξουμε πλακίδια που λειτουργούν πραγματικά χωρίς προβλήματα με περιθώρια στα margins. Ας υποθέσουμε ότι αρχικά έχουμε τέτοια πλακίδια χωρίς περιθώρια:

<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 class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ας κάνουμε οριζόντια περιθώρια μεταξύ των στοιχείων χρησιμοποιώντας το margin.

Για να το κάνουμε αυτό, ας ορίσουμε για όλα τα θυγατρικά στοιχεία το margin-right στην τιμή 10px, και για κάθε τρίτο θυγατρικό στοιχείο μηδενίζουμε αυτό το margin. Χρησιμοποιούμε για αυτό την ψευδοκλάση nth-child, ορίζοντας σε αυτήν την παράμετρο έτσι ώστε να επιλέγουμε κάθε τρίτο στοιχείο.

Ας αυξήσουμε επίσης το πλάτος του γονέα σε 320px, για να δώσουμε χώρο για τα περιθώρια, και ας δούμε τι παίρνουμε:

<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 class="child">9</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;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

Λοιπόν, όλα λειτουργούν. Ας αφαιρέσουμε το τελευταίο στοιχείο, ώστε στην τελευταία σειρά να υπάρχουν λιγότερα στοιχεία και ας βεβαιωθούμε ότι με αυτόν τον τρόπο δεν θα έχουμε προβλήματα με αυτήν την τελευταία σειρά:

<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;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

Δημιουργήστε πλακίδια με δύο στοιχεία ανά σειρά με απόσταση μεταξύ των στοιχείων 20px.