Adaptīva flīžu izkārtojuma bez atstarpēm CSS

Izveidosim flīžu izkārtojumu, kurā būs atšķirīgs bloku skaits rindā atkarībā no ekrāna platuma. Lūk, piemērs tam, kas mums vajadzētu iegūt:

Vispirms uzrakstīsim HTML kodu:

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

Tagad pievienosim stilus bloku vecākam:

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

Tagad noteiksim stilus pašiem blokiem, nenoteikot to platumu:

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

Acīmredzami, ka bloku platumam jābūt procentos, lai, mainoties ekrānam, bloki vienmērīgi mainītu savu platumu. Tajā pašā laikā noteiktos ekrāna platuma punktos mums jāmaina bloku platums tā, lai rindā ietilptu noteikts šo bloku daudzums.

Uzrakstīsim kodu, kas novietos četrus blokus rindā:

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

Tagad novietosim trīs blokus rindā:

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

Tagad novietosim divus blokus rindā:

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

Viens bloks rindā:

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

Apvienosim visu kodu kopā:

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

Pārveidojiet manu kodu tā, lai bloku platums tiktu aprēķināts, izmantojot funkciju calc.

Izveidojiet flīžu izkārtojumu, kas, samazinoties ekrānam, sākumā rādīs četrus elementus rindā, pēc tam divi elementi rindā un pēc tam viens elements rindā.

Izveidojiet flīžu izkārtojumu, kas, samazinoties ekrānam, sākumā rādīs sešus elementus rindā, pēc tam trīs elementus rindā un pēc tam vienu elementu rindā.