CSS Grids အတွင်း အတန်းများကို ပေါင်းစည်းခြင်း

Grids အတွင်းရှိ အတန်းများနှင့် ကော်လံများသည် ဂရစ်ကွက်တစ်ခုကို ဖွဲ့စည်းပေးပါသည်။ အစိတ်အပိုင်းတစ်ခုသည် ဂရစ်ကွက်ရှိ ဆဲလ်တစ်ခုတည်းကိုသာမက တစ်ခုထက်ပိုသော ဆဲလ်များကို နေရာယူနိုင်ရန် ပြုလုပ်နိုင်ပါသည်။

အစိတ်အပိုင်းတစ်ခုကို အတန်းတစ်ခုထက်ပို၍ နေရာယူစေလိုပါက၊ ၎င်းအား ဂုဏ်သတ္တိ grid-row ကို သတ်မှတ်ပေးရပါမည်။ ဤဂုဏ်သတ္တိအတွင်း စလပ်ရှိုင်းဖြင့် ခွဲကာ ကိန်းဂဏန်းများကို သတ်မှတ်ပေးရပြီး၊ ၎င်းတို့သည် grid အတွင်းရှိ အစိတ်အပိုင်းများ၏ စတင်သည့် နေရာနှင့် အဆုံးသတ်သည့် နေရာကို ညွှန်ပြပါသည်။

ထိုသို့သတ်မှတ်ခြင်းဖြင့် အစိတ်အပိုင်းသည် ပထမ နေရာမှ ဒုတိယ နေရာအထိ (ဒုတိယနေရာအား မပါဝင်ဘဲ) ဆန့်ထွက်သွားပါမည်။ ဆိုလိုသည်မှာ တန်ဖိုး 1 / 2 သည် အစိတ်အပိုင်းအား ပထမ ဆဲလ်တစ်လုံးကိုသာ နေရာယူစေပြီး၊ တန်ဖိုး 1 / 3 သည် အစိတ်အပိုင်းအား ပထမ နှင့် ဒုတိယ ဆဲလ်များကို နေရာယူစေသည် (သို့သော် တတိယ ဆဲလ်ကို မပါဝင်စေပါ)။

ဥပမာ

ကျွန်ုပ်တို့တွင် ကောင်းလက်သယ် အစိတ်အပိုင်းသုံးခုပါသော grid တစ်ခု ရှိသည်ဆိုပါစို့။ ပထမအစိတ်အပိုင်းသည် အတန်းနှစ်ခုကို နေရာယူအောင် သူတို့ကို နေရာချထားကြည့်ရအောင်။

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

css#parent {
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: 300px;
  width: 400px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 3; /* အတန်းနှစ်ခု */
}
#elem2 {
  grid-row: 1 / 2;
}
#elem3 {
  grid-row: 2 / 3;
}

Результат:

ဥပမာ

ယခု စတုတ္ထ ဘလောက်အား အတန်းသုံးခု သတ်မှတ်ပေးကြည့်ပါမည်။

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;
  height: 300px;
  width: 400px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
}
#elem4 {
  grid-row: 1 / 4;
}

Результат:

လက်တွေ့လုပ်ဆောင်ချက်များ