CSSда гилдирак плиточка

Келинг, экран энига қараб қаторда турли миқдорда блокларга эга бўладиган плиточка ясайлик. Мана, бизга натижада нимa керак бўлган мисол:

Аввал 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 функцияси орқали ҳисоблансин.

Экран кичрайганда аввал қаторда тўртта элемент, сўнгра иккита элемент ва кейин битта элемент бўладиган плиточка ясангиз.

Экран кичрайганда аввал қаторда олтита элемент, сўнгра учта элемент ва кейин битта элемент бўладиган плиточка ясангиз.