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

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

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

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

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

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

#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 မှတစ်ဆင့် ကြည့်ရှုကြပါစို့:

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

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

#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 ထဲသို့ ဝင်ရောက်ကြည့်ရှုကြပါစို့:

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

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

#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 ကို အသုံးပြု၍ ဆဲလ်များအတွင်းရှိ အရာများ၏ ညှိခြင်းကို ကြည့်ရှုကြပါစို့:

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

justify-items ပိုင်ဆိုင်မှု,
သည် grid ၏ ဆဲလ်များအတွင်းရှိ အရာများကို အလျားလိုက်ဝင်ရိုးတွင် ညှိပေးသည်
align-items ပိုင်ဆိုင်မှု,
သည် ကန့်လန့်ဝင်ရိုးတွင် ညှိခြင်းကို သတ်မှတ်ပေးသည်