Адаптивӣ кардани плиткаҳо бе фосилаҳо дар 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 ҳисоб карда шавад.

Плиткае созед, ки вақте экран хурд карда мешавад, аввал чор элемент дар як сатр, сипас ду элемент дар як сатр ва сипас як элемент дар як сатр дошта бошад.

Плиткае созед, ки вақте экран хурд карда мешавад, аввал шаш элемент дар як сатр, сипас се элемент дар як сатр ва сипас як элемент дар як сатр дошта бошад.