CSS ග්රිඩ් වල පේළි ගණන සහ පළල
ග්රිඩ් මූලද්රව්ය පේළි ඔස්සේ ද ස්ථානගත කළ හැකිය.
මේ සඳහා අදහස් කර ඇත්තේ
grid-template-rows ගුණාංගයයි.
මෙම ගුණාංගය පේළිවල ප්රමාණ හිස් තැනකින්
පිළිගනී. එහි අප අධ්යයනය කළ
සමාන අගයන් තීර සඳහාද යෙදිය හැකිය.
උදාහරණය
උදාහරණයක් ලෙස, අපි බ්ලොක් පේළි හතරකට ස්ථානගත කරමු:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
උදාහරණය
පළමු සහ තෙවන පේළි සඳහා පික්සල වලින් ස්ථිර පළලක් නියම කරමු, දෙවන පේළියට ඉතිරි ඉඩ ගන්නට ඉඩ හරිමු:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
උදාහරණය
පේළිවල ප්රමාණ නිර්දේශ කිරීම සඳහා
repeat ශ්රිතය භාවිතා කරමු:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
උදාහරණය
පේළිවලට උස 50px ලෙස නියම කරමු,
පේළි ගණන ස්වයංක්රීයව
auto-fill අගය භාවිතයෙන්
සකසමු:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
ප්රායෝගික කාර්යයන්
බ්ලොක් පේළි තුනකට ස්ථානගත කරන්න.
පළමු බ්ලොකයේ ප්රමාණය
100px විය යුතුය,
දෙවන බ්ලොකය 150px,
තුන්වන බ්ලොකය 200px විය යුතුය.
ඔබේ ග්රිඩ් එකේ පේළි තුනක් ඇති යුතුය. ඒවාට සමාන පළලක් ඇති වන පරිදි සකසන්න.
