grid-column-start ගුණය
grid-column-start ගුණය
ග්රිඩයක හෝ ජාලකයක තීරු අනුව
මූලද්රව්යයක ආරම්භක පිහිටුම නියම කරයි.
ගුණයේ අගය ධන සංඛ්යාවක් හෝ
ඍණ සංඛ්යාවක් විය හැක.
අපි ධන සංඛ්යාවක් නියම කළහොත්,
මූලද්රව්යයේ ආරම්භක පිහිටුම ගණනය කරනු ලබන්නේ වමේ සිට
දකුණට යන දිශාවට ය.
ඍණ සංඛ්යාවක් නියම කරන විට මූලද්රව්යය
පිහිටුවනු ලබන්නේ ප්රතිලෝම අනුපිළිවෙලින්,
එනම් දකුණේ සිට වමට යන දිශාවට ය.
වාක්ය රීතිය
තේරුම් ගන්නා {
grid-column-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;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column-start: 1;
}
#elem2 {
grid-column-start: 2;
}
#elem3 {
grid-column-start: 3;
}
:
උදාහරණය
දැන් අපි grid-column-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;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column-start: -1;
}
#elem2 {
grid-column-start: -2;
}
#elem3 {
grid-column-start: -3;
}
:
උදාහරණය
දැන් අපි
grid-column-end ගුණය භාවිතා කරමින්
පළමු, දෙවන සහ තෙවන මූලද්රව්ය
පළමු පේළියේ පිහිටන ලෙස සකසමු.
හතරවන මූලද්රව්ය
සම්පූර්ණ දෙවන පේළිය අල්ලාගනිමු:
<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;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column-start: 1;
grid-column-end: 2;
}
#elem2 {
grid-column-start: 2;
grid-column-end: 3;
}
#elem3 {
grid-column-start: 3;
grid-column-end: 4;
}
#elem4 {
grid-column-start: 1;
grid-column-end: 4;
}
:
උදාහරණය
යාබද මූලද්රව්ය විසින් අල්ලාගෙන සිටින තීරු අතිච්ඡාදනය වන විට, සෑම ඊළඟ මූලද්රව්යයක්ම පහළ පේළියකට මාරු වේ. මෙම හැකියාව සැලකිල්ලට ගනිමින් අපි පළමු මූලද්රව්යය පළමු පේළියේ, දෙවන මූලද්රව්යය - දෙවන පේළියේ, තෙවන සහ හතරවන මූලද්රව්ය - තෙවන පේළිය අල්ලාගන්නා ලෙස සකසමු:
<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;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column-start: 1;
grid-column-end: 4;
}
#elem2 {
grid-column-start: 2;
grid-column-end: 3;
}
#elem3 {
grid-column-start: 1;
grid-column-end: 2;
}
#elem4 {
grid-column-start: 3;
grid-column-end: 4;
}
:
මෙයද බලන්න
-
grid-column-endගුණය,
ග්රිඩයක තීරු අනුව මූලද්රව්යයක අවසාන පිහිටුම නියම කරයි -
grid-columnගුණය,
ග්රිඩයක තීරු අනුව මූලද්රව්යයක ආරම්භක සහ අවසාන පිහිටුම් නියම කරයි -
grid-template-columnsගුණය,
ග්රිඩයක තීරු ගණන සහ පළල නියම කරයි -
grid-auto-columnsගුණය,
ස්වයංක්රීය ග්රිඩයක තීරු ගණන සහ පළල නියම කරයි
