ဂရစ်ဒ်-ကော်လံ-စတတ် ပရိုပါတီ

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 ပရိုပါတီ၊
အထင်အမြင်မရှိသော ဂရစ်ဒ်အတွင်း ကော်လံအရေအတွက်နှင့် အကျယ်ကို သတ်မှတ်ပေးသည်