grid-row-start ගුණය
grid-row-start ගුණය
ග්රිඩයක හෝ ජාලයක මූලද්රව්යයක
පේළි අනුව ආරම්භක ස්ථානය නියම කරයි.
ගුණයේ අගය විය හැක්කේ
ධනාත්මක හෝ ඍණාත්මක අංකයකි.
ධනාත්මක අංකයක් නියම කරන්නේ නම්,
මූලද්රව්යයේ ආරම්භක ස්ථානය ඉහළ සිට පහළට
ගණනය කෙරේ. ඍණාත්මක අංකයක් සඳහන් කරන විට මූලද්රව්යය
ප්රතිලෝම අනුපිළිවෙලට පිහිටා ඇත,
එනම් පහළ සිට ඉහළට.
වාක්ය රචනා ක්රමය
තෝරන්නා {
grid-row-start: ධනාත්මක හෝ ඍණාත්මක අංකය;
}
උදාහරණය
ග්රිඩයක ඇති මූලද්රව්යවලට ආරම්භක ස්ථාන නියම කරමු:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
padding: 10px;
width: 400px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row-start: 1;
}
#elem2 {
grid-row-start: 2;
}
#elem3 {
grid-row-start: 3;
}
:
උදාහරණය
දැන් අපි grid-row-start ගුණයේ
ඍණාත්මක අංක සඳහන් කරමු. දැන් elem3
විශාලතම ඉහළ පේළිය ගන්නේ, elem1 අතර
- ඉතා පහළ:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
padding: 10px;
width: 400px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row-start: -1;
}
#elem2 {
grid-row-start: -2;
}
#elem3 {
grid-row-start: -3;
}
:
උදාහරණය
පළමු බ්ලොක් දෙකේ පේළි ගන්නා පරිදි සකසමු.
මේ සඳහා අපට අවශ්ය වනු ඇත
grid-row-start සහ grid-row-end ගුණ ඒකාබද්ධ කිරීමට:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
grid-template-columns: 2fr 1fr;
height: 300px;
width: 400px;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row-start: 1;
grid-row-end: 3;
}
#elem2 {
grid-row-start: 1;
grid-row-end: 2;
}
#elem3 {
grid-row-start: 2;
grid-row-end: 3;
}
:
උදාහරණය
දැන් අපි හතරවන බ්ලොක් පේළි තුනකට නියම කරමු:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid-template-columns: 2fr 1fr;
height: 300px;
width: 400px;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row-start: 1;
grid-row-end: 2;
}
#elem2 {
grid-row-start: 2;
grid-row-end: 3;
}
#elem3 {
grid-row-start: 3;
grid-row-end: 4;
}
#elem4 {
grid-row-start: 1;
grid-row-end: 4;
}
:
මෙයද බලන්න
-
grid-row-endගුණය,
ග්රිඩයක මූලද්රව්යයක පේළි අනුව අවසාන ස්ථානය නියම කරයි -
grid-rowගුණය,
ග්රිඩයක මූලද්රව්යයක පේළි අනුව ආරම්භක සහ අවසාන ස්ථාන නියම කරයි -
grid-template-rowsගුණය,
ග්රිඩයක පේළි ගණන සහ පළල නියම කරයි -
grid-auto-rowsගුණය,
සඟවා ඇති ග්රිඩයක පේළි ගණන සහ පළල නියම කරයි
