CSS Grid တစ်ခုတည်းသော အစိတ်အပိုင်းတစ်ခုအား အလျားလိုက် ဝင်ရိုးတစ်လျှောက် ချိန်ညှိခြင်း

အလျားလိုက်ဝင်ရိုးတစ်လျှောက် ချိန်ညှိခြင်းကို မိဘ element တစ်ခုတည်းတွင်သာမက သားသမီး တစ်ခုချင်းစီအတွက်လည်း သတ်မှတ်ပေးနိုင်ပါသည်။ ဤရည်ရွယ်ချက်အတွက် property justify-self ကိုအသုံးပြုပါသည်။

အလျားလိုက်ဝင်ရိုး၏ စတင်ရာနေရာတွင်

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

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	justify-self: start;
}

အလျားလိုက်ဝင်ရိုး၏ အလယ်ဗဟိုတွင်

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

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	justify-self: center;
}

အလျားလိုက်ဝင်ရိုး၏ အဆုံးနေရာတွင်

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

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	justify-self: end;
}

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

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

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

ယခင် လေ့ကျင့်ခန်းကို ပြောင်းလဲပြီး ပဉ္စမမြောက် element ၏ ချိန်ညှိမှုသည် အလျားလိုက်ဝင်ရိုး၏ အဆုံးနေရာတွင် ဖြစ်ပေါ်စေပါ။