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

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

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

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

cssဆီလက်တာ {
  grid-column-end: အပေါင်းသို့မဟုတ်အနှုတ်ကိန်း;
}

ဥပမာ

ဂရစ်အတွင်းရှိ အမှတ်များအတွက် အဆုံးတည်နေရာများ သတ်မှတ်ကြည့်ရအောင်။

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

css#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 ဂုဏ်သတ္တိကို အသုံးပြု၍ ပထမ၊ ဒုတိယနှင့် တတိယအမှတ်များသည် ပထမအတန်းတွင် တည်ရှိပြီး၊ စတုတ္ထအမှတ်သည် ဒုတိယအတန်းတစ်ခုလုံးကို ယူထားစေရန် လုပ်ဆောင်ကြည့်ရအောင်။

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

css#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;
}

Результат:

ဥပမာ

အနီးအနားရှိ အမှတ်များက ယူထားသော ကော်လံများ ထပ်နေပါက၊ နောက်ထပ်အမှတ်တစ်ခုစီသည် အောက်ရှိ နောက်ထပ်အတန်းသို့ ရွေ့သွားမည်။ ဤထူးခြားချက်ကို အသုံးပြု၍ ပထမအမှတ်သည် ပထမအတန်း၊ ဒုတိယအမှတ်သည် ဒုတိယအတန်း၊ တတိယနှင့် စတုတ္ထအမှတ်များသည် တတိယအတန်းတွင် တည်ရှိစေကြည့်ရအောင်။

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

css#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 ဂုဏ်သတ္တိတွင် အနှုတ်ကိန်းများကို သတ်မှတ်ကြည့်ရအောင်။

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

css#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;
}

Результат:

ဒါတွေလဲ ကြည့်ပါ