Адаптивна плочка без празни места во 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.

Направете плочка која при намалување на екранот прво ќе има четири елементи во ред, потоа два елементи во ред, а потоа еден елемент во ред.

Направете плочка која при намалување на екранот прво ќе има шест елементи во ред, потоа три елементи во ред, а потоа еден елемент во ред.