grid-row-end ගුණාංගය
grid-row-end ගුණාංගය
ග්රිඩ් එකක හෝ දැලක මූලද්රව්යයක
අවසාන පේළි ස්ථානය නියම කරයි.
ගුණාංගයේ අගය ධනාත්මක හෝ ඍණ සංඛ්යාවක්
විය හැකිය.
අපි ධනාත්මක අංකයක් නියම කරන්නේ නම්,
මූලද්රව්යයේ ආරම්භක ස්ථානය ඉහළ සිට පහළට
ගණනය කෙරේ. ඍණ අංකයක් නියම කරන විට මූලද්රව්යය
ප්රතිලෝම අනුපිළිවෙලින් පිහිටුවනු ලැබේ,
එනම් පහළ සිට ඉහළට.
වාක්ය රීතිය
තෝරන්නා {
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;
padding: 10px;
width: 400px;
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;
}
:
උදාහරණය
පළමු බ්ලොක් එක පේළි දෙකක් ආවරණය කරන පරිදි කරමු:
<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-start
සහ grid-row-end ගුණාංගවල ඍණ සංඛ්යා දක්වමු.
දැන් 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;
grid-row-end: -2;
}
#elem2 {
grid-row-start: -2;
grid-row-end: -3;
}
#elem3 {
grid-row-start: -3;
grid-row-end: -4;
}
:
මෙයද බලන්න
-
grid-row-startගුණාංගය,
ග්රිඩ් එකක මූලද්රව්යයක ආරම්භක පේළි ස්ථානය නියම කරන -
grid-rowගුණාංගය,
ග්රිඩ් එකක මූලද්රව්යයක ආරම්භක සහ අවසාන පේළි ස්ථාන නියම කරන -
grid-template-rowsගුණාංගය,
ග්රිඩ් එකක පේළි ප්රමාණය සහ පළල නියම කරන -
grid-auto-rowsගුණාංගය,
ස්වයංක්රීය ග්රිඩ් එකක පේළි ප්රමාණය සහ පළල නියම කරන
