grid-column-end ගුණය

grid-column-end ගුණය මගින් grid හෝ සැකිල්ලක අංගයක අවසාන ස්ථානය නිශ්චිත තීරුවක් දක්වා නියම කරයි. ගුණයේ අගය ධන හෝ ඍණ අංකයක් විය හැක. ධන අංකයක් දෙන විට, අංගයේ අවසාන ස්ථානය වමේ සිට දකුණට ගණන් කරනු ලැබේ. ඍණ අංකයක් දක්වන විට අංගය විරුද්ධ අනුපිළිවෙලට පිහිටනු ඇත, එනම් දකුණේ සිට වමට.

grid-column-end ගුණයේ වැදගත් සියුම් කරුණක් නම්, නියම කරන ලද තීරු අංකය අවසාන ස්ථානයට ඇතුළත් නොවීමයි - අපි 3 අංකයක් දුන්නොත්, අංගය පළමු හා දෙවන තීරු පමණක් අල්ලා ගනී.

වාක්‍ය රචනය

තේරුම් ගන්නා {
	grid-column-end: ධන හෝ ඍණ අංකය;
}

උදාහරණය

grid එකක අංගවලට අවසාන ස්ථාන නියම කරමු:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	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: 1;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 4;
}

උදාහරණය

grid-column-start ගුණය භාවිතා කරමින් පළමු, දෙවන හා තෙවන අංග පළමු පේළියේ පිහිටවමු. හතරවන අංගය සම්පූර්ණ දෙවන පේළිය අල්ලා ගන්නට දෙමු:

<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 ගුණයේ දී ඍණ අංක දක්වමු:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	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: 1;
	grid-column-end: -3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: -2;
}

මෙයද බලන්න

grid-column-start ගුණය,
එය grid එකක අංගයක ආරම්භක ස්ථානය තීරු අනුව නියම කරයි
grid-column ගුණය,
එය grid එකක අංගයක ආරම්භක හා අවසාන ස්ථාන තීරු අනුව නියම කරයි
grid-template-columns ගුණය,
එය grid එකක තීරු ගණන හා පළල නියම කරයි
grid-auto-columns ගුණය,
එය ව්‍යංග grid එකක තීරු ගණන හා පළල නියම කරයි