grid-column-end ဂုဏ်သတ္တိ

grid-column-end ဂုဏ်သတ္တိသည် ဂရစ်တစ်ခုအတွင်းရှိ အမှတ်တစ်ခု၏ ကော်လံအဆုံးတည်နေရာကို သတ်မှတ်ပေးသည်။ ဂုဏ်သတ္တိ၏တန်ဖိုးသည် အပေါင်းကိန်း သို့မဟုတ် အနှုတ်ကိန်း ဖြစ်နိုင်သည်။ အပေါင်းကိန်းကို သတ်မှတ်ပါက၊ အမှတ်၏အဆုံးတည်နေရာကို ဘယ်မှညာသို့ ရေတွက်သည်။ အနှုတ်ကိန်းကို သတ်မှတ်ပါက အမှတ်သည် ပြောင်းပြန်အစီအစဉ်ဖြင့် တည်ရှိမည်၊ ဆိုလိုသည်မှာ ညာမှဘယ်သို့ ဖြစ်သည်။

grid-column-end ဂုဏ်သတ္တိ၏ အရေးကြီးသော အချက်မှာ သတ်မှတ်ထားသော ကော်လံနံပါတ်သည် အမှတ်၏ အဆုံးတည်နေရာအတွင်းသို့ မပါဝင်ခြင်းဖြစ်သည်။ ဥပမာ ကျွန်ုပ်တို့သည် 3 ဟု သတ်မှတ်ပါက၊ အမှတ်သည် ပထမနှင့် ဒုတိယကော်လံများကိုသာ ယူထားမည်။

ဝါကျဖွဲ့စည်းပုံ

ဆီလက်တာ {
	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: 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-column ဂုဏ်သတ္တိ၊
အရာသည် ဂရစ်တွင်း အမှတ်၏ ကော်လံအစနှင့် အဆုံးတည်နေရာများကို သတ်မှတ်ပေးသည်
grid-template-columns ဂုဏ်သတ္တိ၊
အရာသည် ဂရစ်အတွင်း ကော်လံအရေအတွက်နှင့် အကျယ်ကို သတ်မှတ်ပေးသည်
grid-auto-columns ဂုဏ်သတ္တိ၊
အရာသည် သွယ်ဝိုက်မပြောသော ဂရစ်အတွင်း ကော်လံအရေအတွက်နှင့် အကျယ်ကို သတ်မှတ်ပေးသည်