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

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

တန်ဖိုးအဖြစ် အပြုသဘောဆောင်သော နံပါတ်ကို သတ်မှတ်ပါက၊ အစိတ်အပိုင်း၏ နေရာကို ဘယ်ဘက်မှ ညာဘက်သို့ ရေတွက်ပါသည်။ အပျက်သဘောဆောင်သော နံပါတ်ကို သတ်မှတ်ပါက အစိတ်အပိုင်းသည် ပြောင်းပြန်အစဉ်အတိုင်း တည်ရှိမည် ဖြစ်ပါသည်။ ဆိုလိုသည်မှာ ညာဘက်မှ ဘယ်ဘက်သို့ ဖြစ်ပါသည်။

Syntax

cssselector {
  grid-column: start position / end position;
}

ဥပမာ

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

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: 1 / 2;
}
#elem2 {
  grid-column: 1 / 3;
}
#elem3 {
  grid-column: 1 / 4;
}

Результат:

ဥပမာ

ယခု grid-column ဂုဏ်သတ္တိတွင် အပျက်သဘောဆောင်သော နံပါတ်များကို သတ်မှတ်ကြည့်ရအောင်။

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: 1 / -2;
}
#elem2 {
  grid-column: 1 / -3;
}
#elem3 {
  grid-column: 1 / -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: 1 / 2;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 3 / 4;
}
#elem4 {
  grid-column: 1 / 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: 1 / 4;
}
#elem2 {
  grid-column: 2 / 3;
}
#elem3 {
  grid-column: 1 / 2;
}
#elem4 {
  grid-column: 3 / 4;
}

Результат:

ဥပမာ

grid-column ဂုဏ်သတ္တိနှင့် grid-row ဂုဏ်သတ္တိတို့ကို ပေါင်းစပ်အသုံးပြုကြည့်ရအောင်။

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;
  grid-template-columns: 2fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  height: 300px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 3;
}
#elem2 {
  grid-row: 1 / 2;
}
#elem3 {
  grid-row: 1 / 2;
}
#elem4 {
  grid-row: 2 / 3;
  grid-column: 2 / 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 id="elem5">5</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  height: 300px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
}
#elem2 {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
}
#elem3 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}
#elem4 {
  grid-row: 3 / 3;
  grid-column: 2 / 4;
}
#elem5 {
  grid-row: 4 / 5;
  grid-column: 1 / 4;
}

Результат:

ဆက်လက်ဖတ်ရှုရန်