Адаптивӣ кардани плитка бо фосилаҳо дар CSS

Биёед акнун плиткаеро бо фосилаҳо созем. Ин мисоли он аст, ки мо бояд ба даст орем:

Барои оғоз, ба волидайн (родитель) блокҳо услубҳо (стилҳо) медиҳем:

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

Акнун ба худи блокҳо услубҳо (стилҳо) медиҳем, бе он ки ба онҳо паҳноӣ (width) диҳем, аммо марҷини поёнӣ (margin-bottom)-ро ба фоиз медиҳем:

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

Акнун кодеро менависем, ки чор блокро дар як саф ҷойгир мекунад, бо фосилаҳои (отступҳои) мувофиқ:

@media (min-width: 1000px) {
	.child {
		width: calc(100% / 4 - 1.5% * 3 / 4);
	}
	.child:not(:nth-child(4n)) {
		margin-right: 1.5%;
	}
}

Ва акнун се блокро дар як саф ҷойгир мекунем:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: calc(100% / 3 - 1.5% * 2 / 3);
	}
	.child:not(:nth-child(3n)) {
		margin-right: 1.5%;
	}
}

Ва акнун ду блокро дар як саф ҷойгир мекунем:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: calc(100% / 2 - 1.5% * 1 / 2);
	}
	.child:not(:nth-child(2n)) {
		margin-right: 1.5%;
	}
}

Як блок дар як саф:

@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;
	margin-bottom: 1.5%;
	border: 1px solid green;
}

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: calc(100% / 2 - 1.5% * 1 / 2);
	}
	.child:not(:nth-child(2n)) {
		margin-right: 1.5%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: calc(100% / 3 - 1.5% * 2 / 3);
	}
	.child:not(:nth-child(3n)) {
		margin-right: 1.5%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: calc(100% / 4 - 1.5% * 3 / 4);
	}
	.child:not(:nth-child(4n)) {
		margin-right: 1.5%;
	}
}

Плиткаеро созед, ки вақте экран хурд мешавад, аввал ҳашт элементро дар як саф дошта бошад, сипас чор элемент дар як саф, ва сипас ду элемент дар як саф. Бигзор фосилаи байни элементҳо 0.75% бошад.

Вазифаи қаблиро тавре тағир диҳед, ки фосилаи байни элементҳо арзиши фиксиро дар 20px дошта бошад.