place-items ပိုင်ဆိုင်မှု

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

ဝါကျဖွဲ့ထုံး

cssselector {
  place-items: အလျားလိုက်ညှိခြင်းတန်ဖိုး ဒေါင်လိုက်ညှိခြင်းတန်ဖိုး;
}

ဥပမာ . ဒေါင်လိုက်ဝင်ရိုးတွင် အလယ်ဗဟိုနှင့် အလျားလိုက်ဝင်ရိုးတွင် အစသို့ ညှိခြင်း

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;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

ကျွန်ုပ်တို့၏ grid ကို ဘရောက်ဆာ debugger မှတစ်ဆင့် ကြည့်ရှုကြပါစို့:

ဥပမာ . ဒေါင်လိုက်ဝင်ရိုးတွင် အဆုံးသို့နှင့် အလျားလိုက်ဝင်ရိုးများတွင် အလယ်ဗဟိုသို့ ညှိခြင်း

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;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

ယခု debugger panel ထဲသို့ ဝင်ရောက်ကြည့်ရှုကြပါစို့:

ဥပမာ . ဒေါင်လိုက်ဝင်ရိုးတွင် အစသို့နှင့် အလျားလိုက်ဝင်ရိုးများတွင် အဆုံးသို့ ညှိခြင်း

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;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

ဘရောက်ဆာ debugger ကို အသုံးပြု၍ ဆဲလ်များအတွင်းရှိ အရာများ၏ ညှိခြင်းကို ကြည့်ရှုကြပါစို့:

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