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 ශ්‍රිතය හරහා ගණනය කරන ලෙස මගේ කේතය නැවත සකස් කරන්න.

තිරය කුඩා වන විට පළමුව පේළියකට අංග හතරක්, පසුව පේළියකට අංග දෙකක්, ඉන් පසුව එකක් පේළියකට අංගයක් ඇති කාසියක් සාදන්න.

තිරය කුඩා වන විට පළමුව පේළියකට අංග හයක්, පසුව පේළියකට අංග තුනක්, ඉන් පසුව එකක් පේළියකට අංගයක් ඇති කාසියක් සාදන්න.