CSSda bo'shliqlarsiz moslashuvchi plitochka

Keling, ekran eniga qarab qatorda turli miqdordagi bloklarga ega bo'lgan plitochka yasaymiz. Mana biz qilishimiz kerak bo'lgan narsaning misoli:

Avval HTML kodini yozamiz:

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

Keling, endi bloklarning ota-onalariga uslublarni qo'shamiz:

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

Endi o'zimizga bloklarga uslublarni belgilaymiz, ularga kenglikni belgilamasdan:

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

Bloklarning kengligi foizlarda bo'lishi kerakligi aniq, shunda ekran o'zgarganda bloklar o'z kengligini silliq o'zgartiradi. Shu bilan birga, ma'lum ekran nuqtalarida biz bloklarning kengligini o'zgartirishimiz kerak shunday qilib, qatorda ma'lum miqdordagi ushbu bloklar joylashtiriladi.

Keling, qatorga to'rtta blok qo'yadigan kodni yozamiz:

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

Endi qatorga uchta blok qo'yamiz:

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

Endi qatorga ikkita blok qo'yamiz:

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

Qatorga bitta blok:

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

Keling, barcha kodni birga yig'amiz:

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

Mening kodimni bloklarning kengligi calc funktsiyasi orqali hisoblanganiga o'zgartiring.

Ekran kichraytirilganda avval qatoriga to'rtta element, keyin qatoriga ikkita element va keyin bitta element bo'lgan plitochka yarating.

Ekran kichraytirilganda avval qatoriga oltita element, keyin qatoriga uchta element va keyin bitta element bo'lgan plitochka yarating.