အတွင်းစီ CSS Grids များ

Grid စနစ်တွင် မိမိကိုယ်တိုင် ဖန်တီးထားသော ကွန်ရက်ထဲသို့ နောက်ထပ် အတွင်းစီ grid တစ်ခု ထည့်သွင်းနိုင်သော အခွင့်အရေးရှိပါသည်။ အတွင်းစီ grids များကို ဝဘ်ဆိုဒ် ဘလော့ခ်များအတွင်းရှိ အသေးစား အစိတ်အပိုင်းများကို နေရာချရာတွင် ကျယ်ကျယ်ပြန့်ပြန့် အသုံးပြုကြပါသည်။ ဤအခွင့်အရေးကို အသုံးပြုနိုင်ရန်အတွက် သားစဉ်မြေးဆက် အစိတ်အပိုင်းကိုယ်တိုင်ထဲတွင် display ဂုဏ်သတ္တိကို grid တန်ဖိုးဖြင့် သတ်မှတ်ပေးရန် လိုအပ်ပါသည်။

ဥပမာအားဖြင့် grid ၏ ဆဲလ်တစ်ခုထဲတွင် နောက်ထပ် grid တစ်ခု ဖန်တီးကြည့်ကြပါစို့။

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
	</div>
</div>

#parent {
	display: grid;
	grid-template: 1fr 1fr / 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem4 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
}
#elem4 > div {
	grid-gap: 5px;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

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

ယခင်လေ့ကျင့်ခန်းကို အတွင်းစီ grid ထဲတွင် သားစဉ်မြေးဆက် အစိတ်အပိုင်းငါးခု ရှိစေရန် ပြောင်းလဲလိုက်ပါ။

ပထမ နှင့် တတိယ အစိတ်အပိုင်းများထဲတွင် သားစဉ်မြေးဆက် အစိတ်အပိုင်းသုံးခုပါဝင်သော အတွင်းစီ grid တစ်ခုစီ ဖန်တီးပါ။