CSS Grid ရှိ အစိတ်အပိုင်းများ ထပ်ခြင်း

Grid စနစ်တွင် Grid ဧရိယာများ ဖြတ်ကျော်သောအခါ သို့မဟုတ် အနုတ် ပြင်ပအကွာအဝေးများ သတ်မှတ်သောအခါ အချို့သော အစိတ်အပိုင်းများကို အခြားအရာများပေါ်သို့ ထပ်နိုင်သည့် အလားအလာကို ပံ့ပိုးပေးထားပါသည်။ ထပ်ခြင်းသည် ပုံသေအားဖြင့် ဖြစ်ပေါ်နိုင်သော်လည်း၊ အစိတ်အပိုင်းတစ်ခုချင်းစီအတွက် ၎င်းကို သတ်မှတ်ထားသော အစဉ်လိုက်တွင် သတ်မှတ်နိုင်ပါသည်။ z-index နှင့် order ဂုဏ်သတ္တိများဖြင့် သို့မဟုတ် ၎င်းတို့၏ ပေါင်းစပ်မှုဖြင့် သတ်မှတ်နိုင်ပါသည်။

Grid အတွင်း အစိတ်အပိုင်းများကို ပုံသေအတိုင်း ထပ်ခြင်း

ကျွန်ုပ်တို့တွင် အစိတ်အပိုင်းများ တစ်ခုနှင့်တစ်ခု ဖုံးအုပ်နေသော စားပွဲတစ်ခု ရှိသည်ဆိုပါစို့။

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

#parent {
	display: grid;
	grid: repeat(6, 1fr) / repeat(6, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	background-color: pink;
	grid-column: 1 / 4;
	grid-row: 1 / 5;
}
#elem2 {
	background-color: orange;
	grid-column: 2 / 5;
	grid-row: 3 / 6;
}
#elem3 {
	background-color: green;
	grid-column: 3 / 6;
	grid-row: 2 / 4;
}

`order` ဂုဏ်သတ္တိကို အသုံးပြု၍ အစိတ်အပိုင်းများ ထပ်ခြင်းအစဉ်ကို ပြောင်းလဲခြင်း

ယခု order ဂုဏ်သတ္တိကို အသုံးပြုပါမည်။ ကလေးအစိတ်အပိုင်းတစ်ခုစီတွင် ၎င်းကို သတ်မှတ်ပါမည်။

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

#parent {
	display: grid;
	grid: repeat(6, 1fr) / repeat(6, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	background-color: pink;
	grid-column: 1 / 4;
	grid-row: 1 / 5;
	order: 3;
}
#elem2 {
	background-color: orange;
	grid-column: 2 / 5;
	grid-row: 3 / 6;
	order: 2;
}
#elem3 {
	background-color: green;
	grid-column: 3 / 6;
	grid-row: 2 / 4;
	order: 1;
}

`z-index` ဂုဏ်သတ္တိကို အသုံးပြု၍ အစိတ်အပိုင်းများ ထပ်ခြင်းအစဉ်

ယခု z-index ဂုဏ်သတ္တိကို အသုံးပြုပါမည်။ ၎င်းသည် z-ဝင်ရိုး တစ်လျှောက် အစိတ်အပိုင်းများ၏ တည်နေရာအစဉ်ကို စိတ်ကြိုက်ပြင်ဆင်ခွင့်ပြုပါသည်။

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

#parent {
	display: grid;
	grid: repeat(6, 1fr) / repeat(6, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	background-color: pink;
	grid-column: 1 / 4;
	grid-row: 1 / 5;
	z-index: 1;
}
#elem2 {
	background-color: orange;
	grid-column: 2 / 5;
	grid-row: 3 / 6;
	z-index: 3;
}
#elem3 {
	background-color: green;
	grid-column: 3 / 6;
	grid-row: 2 / 4;
	z-index: 2;
}

ရရှိသောရလဒ်မှ မြင်တွေ့ရသည့်အတိုင်း၊ z-index ဂုဏ်သတ္တိ၏ အမြင့်ဆုံးတန်ဖိုးသည် အနိမ့်တန်ဖိုးများရှိသော အခြားအစိတ်အပိုင်းများအပေါ်တွင် အစိတ်အပိုင်း၏တည်နေရာကို သတ်မှတ်ပေးပါသည်။

`order` နှင့် `z-index` ဂုဏ်သတ္တိများကို ပေါင်းစပ်၍ အစိတ်အပိုင်းများ ထပ်ခြင်း

ကျွန်ုပ်တို့သည် z-index နှင့် order ကို အသုံးပြု၍ အစိတ်အပိုင်းများအတွက် အစဉ်ကို ပြောင်းလဲပါက၊ z-index အတွက် ဦးစားပေးမှု ကျန်ရှိနေပါမည်။ ဤသည်မှာ အစိတ်အပိုင်းများ၏ အစဉ်ကို ပြောင်းလဲနိုင်ပြီး တစ်ချိန်တည်းတွင် ၎င်းတို့၏ထပ်ခြင်းအပေါ် ထိန်းချုပ်မှု မဆုံးရှုံးစေရန် ခွင့်ပြုပေးပါသည်။

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

#parent {
	display: grid;
	grid: repeat(6, 1fr) / repeat(6, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	background-color: pink;
	grid-column: 1 / 4;
	grid-row: 1 / 5;
	order: 3;
	z-index: 1;
}
#elem2 {
	background-color: orange;
	grid-column: 2 / 5;
	grid-row: 3 / 6;
	order: 1;
	z-index: 2;
}
#elem3 {
	background-color: green;
	grid-column: 3 / 6;
	grid-row: 2 / 4;
	order: 1;
	z-index: 3;
}

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

ကျွန်ုပ်တို့၏ Grid တွင် အစိတ်အပိုင်းလေးခု ရှိသည်ဆိုပါစို့။

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

#parent {
	display: grid;
	grid: repeat(6, 1fr) / repeat(6, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	background-color: pink;
}
#elem2 {
	background-color: orange;
}
#elem3 {
	background-color: green;
}
#elem4 {
	background-color: lightblue;
}

order ဂုဏ်သတ္တိကို အသုံးပြု၍ အောက်ပါဥပမာနှင့်အညီ အစိတ်အပိုင်းအားလုံးကို နေရာချပါ။

ယခု ယခင်လေ့ကျင့်ခန်းကို ဖြေရှင်းရန် z-index ဂုဏ်သတ္တိကို အသုံးပြုပါ။

ကျွန်ုပ်တို့၏ Grid တွင် အစိတ်အပိုင်းလေးခု ရှိသည်ဆိုပါစို့။

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

#parent {
	display: grid;
	grid: repeat(6, 1fr) / repeat(6, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	background-color: pink;
}
#elem2 {
	background-color: orange;
}
#elem3 {
	background-color: green;
}
#elem4 {
	background-color: lightblue;
}

order ဂုဏ်သတ္တိကို အသုံးပြု၍ �ောက်ပါဥပမာနှင့်အညီ အစိတ်အပိုင်းအားလုံးကို နေရာချပါ။