Παρεμβολές σε πλακάκια με αυτόματο πλάτος μπλοκ στο CSS

Ας υποθέσουμε ότι έχουμε πλακάκια με τέσσερα μπλοκ στη σειρά:

.child {
	width: 25%;
}

Ας προσθέσουμε στα μπλοκ μας περιθώρια σε ποσοστά οριζόντια και κάθετα:

.child {
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

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

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

1.5% * 3 / 4 = 1.125

Τότε το πλάτος κάθε μπλοκ θα είναι:

25% - 1.5% * 3 / 4 = 23.875%

Θα προκύψει ο ακόλουθος κώδικας:

.child {
	width: 23.875%;
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Μπορούμε να μην υπολογίσουμε μόνοι μας αυτό το περιθώριο, αλλά να αναθέσουμε τη δουλειά του υπολογισμού στη συνάρτηση calc:

.child {
	width: calc(25% - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Ας υπολογίζει επίσης τη συνάρτηση calc και το πλάτος του μπλοκ:

.child {
	width: calc(100% / 4 - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Ορίστε στα μπλοκ πλάτος σε ποσοστά έτσι, ώστε στα πλακάκια να υπάρχουν τρία μπλοκ στη σειρά, και μεταξύ τους απόσταση 3%.

Ορίστε στα μπλοκ πλάτος σε ποσοστά έτσι, ώστε στα πλακάκια να υπάρχουν έξι μπλοκ στη σειρά, και μεταξύ τους απόσταση 0.5%.

Ορίστε στα μπλοκ πλάτος σε ποσοστά έτσι, ώστε στα πλακάκια να υπάρχουν τέσσερα μπλοκ στη σειρά, και μεταξύ των μπλοκ να υπάρχει απόσταση 30px.

Ορίστε στα μπλοκ πλάτος σε ποσοστά έτσι, ώστε στα πλακάκια να υπάρχουν πέντε μπλοκ στη σειρά, και μεταξύ των μπλοκ να υπάρχει απόσταση 50px.