Προσαρμοστική πλακιδωτή διάταξη χωρίς περιθώρια στο CSS

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

Ας γράψουμε πρώτα τον κώδικα HTML:

<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 class="child">10</div>
	<div class="child">11</div>
	<div class="child">12</div>
</div>

Ας προσθέσουμε τώρα στυλ στο γονέα των μπλοκ:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}

Τώρα ας ορίσουμε στυλ στα ίδια τα μπλοκ, χωρίς να ορίσουμε πλάτος σε αυτά:

.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	border: 1px solid green;
}

Προφανώς, το πλάτος των μπλοκ πρέπει να είναι σε ποσοστά, ώστε όταν αλλάζει η οθόνη, τα μπλοκ να αλλάζουν ομαλά το πλάτος τους. Ταυτόχρονα, σε ορισμένα σημεία της οθόνης πρέπει να αλλάζουμε το πλάτος των μπλοκ έτσι ώστε σε μια σειρά να χωράει ένας συγκεκριμένος αριθμός από αυτά τα μπλοκ.

Ας γράψουμε κώδικα που θα τοποθετήσει τέσσερα μπλοκ σε μια σειρά:

@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Και τώρα ας τοποθετήσουμε τρία μπλοκ σε μια σειρά:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}

Και τώρα ας τοποθετήσουμε δύο μπλοκ σε μια σειρά:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}

Ένα μπλοκ ανά σειρά:

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}

Ας συγκεντρώσουμε όλο τον κώδικα μαζί:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}
.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	border: 1px solid green;
}

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Μετατρέψτε τον κώδικά μου έτσι ώστε το πλάτος των μπλοκ να υπολογίζεται μέσω της συνάρτησης calc.

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

Δημιουργήστε μια πλακιδωτή διάταξη που, όταν μειώνεται η οθόνη, θα έχει πρώτα έξι στοιχεία ανά σειρά, μετά τρία στοιχεία ανά σειρά, και μετά ένα στοιχείο ανά σειρά.