CSS Grid အတွင်း ဆဲလ်များအတွင်း ဝင်ရိုးနှစ်ခုလုံးတွင် တန်းညှိခြင်းအတွက် အတိုကောက်

အတိုကောက် property place-items ကို အသုံးပြု၍ Grid အတွင်းရှိ ဆဲလ်များအတွင်းမှ အစိတ်အပိုင်းများကို ဝင်ရိုးနှစ်ခုလုံးတွင် တစ်ပြိုင်နက် တန်းညှိနိုင်ပါသည်။ Property သည် နှစ်ခုသော တန်ဖိုးများကို လက်ခံပြီး ကြားတွင် ခြားထားသော space တစ်ခုပါရှိသည်။ ပထမတန်ဖိုးဖြင့် အစိတ်အပိုင်း၏ ဒေါင်လိုက်ဝင်ရိုးတွင် တည်နေရာကို သတ်မှတ်ပေးပြီး ဒုတိယတန်ဖိုးဖြင့် ပြင်ညီဝင်ရိုးတွင် တည်နေရာကို သတ်မှတ်ပေးသည်။ Property ကို မိဘအစိတ်အပိုင်းတွင် သတ်မှတ်ပေးရသည်။

ဥပမာများဖြင့် ဤ property ၏ အလုပ်လုပ်ပုံကို ကြည့်ရအောင်။

ဒေါင်လိုက်ဝင်ရိုးတွင် အလယ်ဗဟိုနှင့် ပြင်ညီဝင်ရိုးတွင် အစ (start)

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  place-items: center start;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

ကျွန်ုပ်တို့၏ Grid ကို ဒီဘတ်ကာထဲတွင် ကြည့်ရအောင်:

ဒေါင်လိုက်ဝင်ရိုးတွင် အဆုံး (end) နှင့် ပြင်ညီဝင်ရိုးတွင် အလယ်ဗဟို

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  place-items: end center;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

ကျွန်ုပ်တို့၏ Grid ကို ဒီဘတ်ကာထဲတွင် ကြည့်ရအောင်:

ဒေါင်လိုက်ဝင်ရိုးတွင် အစ (start) နှင့် ပြင်ညီဝင်ရိုးတွင် အဆုံး (end)

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  place-items: start end;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

ကျွန်ုပ်တို့၏ Grid ကို ဒီဘတ်ကာထဲတွင် ကြည့်ရအောင်:

လက်တွေ့လေ့ကျင့်ခန်းများ