Placă adaptivă fără spații în CSS

Să facem o placă care va avea un număr diferit de blocuri pe rând în funcție de lățimea ecranului. Iată un exemplu al ceea ce ar trebui să obținem:

Să scriem mai întâi codul 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>

Acum să adăugăm stiluri pentru părintele blocurilor:

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

Acum să setăm stilurile blocurilor în sine, fără a le seta lățimea:

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

Evident, lățimea blocurilor ar trebui să fie în procente, astfel încât la modificarea ecranului blocurile să-și modifice lin lățimea. În același timp, în anumite puncte de rupere ale ecranului, trebuie să modificăm lățimea blocurilor astfel încât pe un rând să încapă un anumit număr de blocuri.

Să scriem codul care va plasa patru blocuri pe rând:

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

Și acum să plasăm trei blocuri pe rând:

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

Și acum să plasăm două blocuri pe rând:

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

Un bloc pe rând:

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

Să reunim tot codul:

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

Modificați codul meu astfel încât lățimea blocurilor să fie calculată prin funcția calc.

Realizați o placă care, la micșorarea ecranului, va avea mai întâi patru elemente pe rând, apoi două elemente pe rând, iar apoi un element pe rând.

Realizați o placă care, la micșorarea ecranului, va avea mai întâi șase elemente pe rând, apoi trei elemente pe rând, iar apoi un element pe rând.