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

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

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

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

<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;
	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) နှင့် ပြင်ညီဝင်ရိုးတွင် အလယ်ဗဟို

<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;
	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)

<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;
	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 ကို ဒီဘတ်ကာထဲတွင် ကြည့်ရအောင်:

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

အစိတ်အပိုင်းခြောက်ခုပါဝင်သော Grid တစ်ခုဖန်တီးပြီး ကော်လံနှစ်ခုဖြင့် အနေအထားသတ်မှတ်ပါ။ Grid ၏ ပြင်ညီဝင်ရိုးတွင် အစ (start) နှင့် ဒေါင်လိုက်ဝင်ရိုးတွင် အလယ်ဗဟိုအတိုင်း အစိတ်အပိုင်းများကို တန်းညှိပါ။

ယခု အစိတ်အပိုင်းများကို ကော်လံသုံးခုဖြင့် အနေအထားသတ်မှတ်ပြီး Grid ၏ ပြင်ညီဝင်ရိုးတွင် အလယ်ဗဟိုနှင့် ဒေါင်လိုက်ဝင်ရိုးတွင် အလယ်ဗဟိုအတိုင်း အစိတ်အပိုင်းများကို တန်းညှိမှုသတ်မှတ်ပါ။

ယခင်လေ့ကျင့်ခန်းကို ပြင်ဆင်ပြီး အစိတ်အပိုင်းများ၏ တန်းညှိမှုသည် Grid ၏ ပြင်ညီဝင်ရိုးတွင် အဆုံး (end) နှင့် ဒေါင်လိုက်ဝင်ရိုးတွင် အစ (start) အတိုင်း ဖြစ်အောင်လုပ်ပါ။