Responsieve tegels zonder marge in CSS

Laten we een tegel maken die een variërend aantal blokken per rij heeft, afhankelijk van de schermbreedte. Hier is een voorbeeld van wat we zouden moeten krijgen:

Laten we eerst de HTML-code schrijven:

<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>

Laten we nu stijlen toevoegen aan de ouder van de blokken:

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

Laten we nu stijlen instellen voor de blokken zelf, zonder hun breedte in te stellen:

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

Het is duidelijk dat de breedte van de blokken in procent moet zijn, zodat de blokken soepel van breedte veranderen wanneer het scherm wordt gewijzigd. Tegelijkertijd moeten we op bepaalde breekpunten van het scherm de breedte van de blokken wijzigen zodat er een bepaald aantal van deze blokken in een rij past.

Laten we code schrijven die vier blokken op een rij plaatst:

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

En laten we nu drie blokken op een rij plaatsen:

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

En laten we nu twee blokken op een rij plaatsen:

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

Eén blok per rij:

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

Laten we alle code samenvoegen:

.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%;
	}
}

Pas mijn code aan zodat de breedte van de blokken wordt berekend via de functie calc.

Maak een tegel die bij het verkleinen van het scherm eerst vier elementen per rij toont, dan twee elementen per rij, en dan één element per rij.

Maak een tegel die bij het verkleinen van het scherm eerst zes elementen per rij toont, dan drie elementen per rij, en dan één element per rij.