CSS හි පරතරයන් සහිත අනුවර්තී ටයිල් බ්ලොක්

දැන් අපි පරතරයන් සහිත ටයිල් බ්ලොක් එකක් සාදමු. අපට ලැබිය යුතු ප්‍රතිඵලයේ උදාහරණය මෙයයි:

පළමුව බ්ලොක්වල මව් අංගයට ස්ටයිල් යොදමු:

.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 (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 ක ස්ථාවර අගයක් වන පරිදි පෙර කාර්යය වෙනස් කරන්න.