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

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

ဝါကျဖွဲ့ပုံ

cssရွေးချယ်သူ {
  grid-column-start: အပေါင်းကိန်း သို့မဟုတ် အနှုတ်ကိန်း;
}

နမူနာ

ဂရစ်ဒ်အတွင်းရှိ အရာဝတ္ထုများအတွက် အစနေရာများကို သတ်မှတ်ကြပါစို့:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</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;
}
#elem2 {
  grid-column-start: 2;
}
#elem3 {
  grid-column-start: 3;
}

Результат:

နမူနာ

ယခုတစ်ခါ grid-column-start ပရိုပါတီတွင် အနှုတ်ကိန်းများကို ညွှန်ပြကြပါစို့:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</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;
}
#elem2 {
  grid-column-start: -2;
}
#elem3 {
  grid-column-start: -3;
}

Результат:

နမူနာ

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

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

Результат:

ဤအကြောင်းကိုလည်း ကြည့်ပါ