Adaptiivne plokikujuline paigutus ilma vahendeta CSS-is

Teeme plokikujulise paigutuse, millel on erinev arv plokke reas sõltuvalt ekraani laiusest. Siin on näide sellest, mida meil peaks saama:

Kirjutame kõigepealt HTML-koodi:

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

Lisame nüüd stiilid plokkide vanemale:

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

Määrame nüüd stiilid plokkidele endile, määramata neile laiust:

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

On ilmselge, et plokkide laius peaks olema protsentides, et ekraani muutumisel plokid sujuvalt oma laiust muudaksid. Samas peame teatud ekraani laiuste juures muutma plokkide laiust nii, et reas oleks ruumi kindlaksmääratud arvul neist plokkidest.

Kirjutame koodi, mis paigutab neli plokki ritta:

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

Ja nüüd paigutame kolm plokki ritta:

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

Ja nüüd paigutame kaks plokki ritta:

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

Üks plokk reas:

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

Paneme kogu kood kokku:

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

Muutke minu koodi nii, et plokkide laius arvutatakse funktsiooni calc abil.

Tehke plokikujuline paigutus, kus ekraani ahenemisel on alguses neli elementi reas, seejärel kaks elementi reas ja siis üks element reas.

Tehke plokikujuline paigutus, kus ekraani ahenemisel on alguses kuus elementi reas, seejärel kolm elementi reas ja siis üks element reas.