CSS Grid အကြောင်းအရာ
၁
၂
၃
၄
၅
ကလေးဒြပ်စင်များ (အရာများ)
ဂရစ် ကွန်တိန်နာ တွင် ဇယားကွက် အရာများ ပါရှိသည်။
ပုံမှန်အားဖြင့်၊ ကွန်တိန်နာတစ်ခုတွင် ကော်လံတစ်ခုစီအတွက် ဇယားကွက်တစ်ခုစီရှိသော်လည်း အတန်းတစ်ခုစီတွင် ကော်လံအများအပြားနှင့်/သို့မဟုတ် အတန်းများချဲ့ထွင်နိုင်ရန် ဇယားကွက်အရာများကို ပုံစံသတ်မှတ်နိုင်သည်။
ဂရစ်-ကော်လံ ပိုင်ဆိုင်မှု-
grid-columnပစ္စည်းတစ်ခုကို ထားရန် မည်သည့်ကော်လံ(များ)ကို သတ်မှတ်သည် ။
ပစ္စည်းက ဘယ်မှာစမယ်၊ ဘယ်မှာဆုံးမလဲ ဆိုတာ သင်သတ်မှတ်ပါတယ်။
၁
၂
၃
၄
၅
၆
၇
၈
၉
၁၀
၁၁
၁၂
၁၃
၁၄
၁၅
မှတ်ချက် ။ _ grid-column_ grid-column-start_grid-column-end
ပစ္စည်းတစ်ခုကို နေရာချရန်၊ သင်သည် လိုင်းနံပါတ်များ ကို ကိုးကားနိုင်သည် ၊ သို့မဟုတ် ၎င်းသည် ကော်လံမည်မျှ ကျယ်မည်ကို သတ်မှတ်ရန် အဓိကစကားလုံး "span" ကို အသုံးပြုနိုင်သည်။
ဥပမာ
"item1" ကို ကော်လံ 1 တွင်စတင်ပြီး ကော်လံ 5 မတိုင်မီအဆုံးသတ်ပါ-
.item1 {
grid-column: 1 / 5;
}
ဥပမာ
"item1" ကို ကော်လံ 1 တွင် စတင်စေပြီး ကော်လံ 3 ခုကို ချဲ့ပါ-
.item1 {
grid-column: 1 / span 3;
}
ဥပမာ
"item2" ကို ကော်လံ 2 တွင် စတင်ပြီး ကော်လံ 3 ခုကို ချဲ့ပါ။
.item2 {
grid-column: 2 / span 3;
}
ဂရစ်-အတန်း ပိုင်ဆိုင်မှု-
grid-rowပစ္စည်းတစ်ခုအား မည်သည့်အတန်းတွင် နေရာချရမည်ကို ပိုင်ဆိုင်မှုက သတ်မှတ်သည် ။
ပစ္စည်းက ဘယ်မှာစမယ်၊ ဘယ်မှာဆုံးမလဲ ဆိုတာ သင်သတ်မှတ်ပါတယ်။
၁
၂
၃
၄
၅
၆
၇
၈
၉
၁၀
၁၁
၁၂
၁၃
၁၄
၁၅
၁၆
မှတ်ချက် ။ _ grid-row_ grid-row-start_grid-row-end
ပစ္စည်းတစ်ခုကို နေရာချရန်၊ သင်သည် လိုင်းနံပါတ်များ ကို ကိုးကားနိုင်သည် သို့မဟုတ် ၎င်းအရာသည် အတန်းမည်မျှအထိ တိုးမည်ကို သတ်မှတ်ရန် အဓိကစကားလုံး "span" ကို အသုံးပြုနိုင်သည်။
ဥပမာ
"item1" ကို row-line 1 တွင် စတင်ပြီး row-line 4 တွင် အဆုံးသတ်ပါ-
.item1 {
grid-row: 1 / 4;
}
ဥပမာ
"item1" ကို အတန်း 1 တွင် စတင်ပြီး 2 တန်းကို ချဲ့ပါ-
.item1 {
grid-row: 1 / span 2;
}
ဂရစ်-ဧရိယာအိမ်ခြံမြေ
ပိုင်ဆိုင်မှု ကို , , နှင့် ဂုဏ်သတ္တိများ grid-areaအတွက် အတိုကောက် ပိုင်ဆိုင်မှုအဖြစ် သုံးနိုင်သည်
။grid-row-startgrid-column-startgrid-row-endgrid-column-end
၁
၂
၃
၄
၅
၆
၇
၈
၉
၁၀
၁၁
၁၂
၁၃
၁၄
၁၅
ဥပမာ
"item8" ကို row-line 1 နှင့် column-line 2 တွင် စတင်ပြီး row-line 5 နှင့် column line 6 တွင် အဆုံးသတ်ပါ-
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
ဥပမာ
"item8" ကို အတန်း-လိုင်း 2 နှင့် ကော်လံလိုင်း 1 တွင် စတင်စေပြီး 2 တန်းနှင့် 3 ကော်လံကို ချဲ့ပါ-
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
ဇယားကွက်များကို အမည်ပေးခြင်း
ဇယားကွက် အ grid-areaရာများသို့ အမည်များသတ်မှတ်ရန် ပိုင်ဆိုင်မှုကိုလည်း အသုံးပြုနိုင်သည်။
ခေါင်းစီး
မီနူး
အဓိက
မှန်တယ်။
အောက်ခြေမှတ်တိုင်
grid-template-areasဂရစ်ကွန်တိန်နာ၏ ပိုင်ဆိုင်မှု ဖြင့် အမည်ပေးထားသော ဂရစ်ပစ္စည်းများကို ရည်ညွှန်းနိုင်သည် ။
ဥပမာ
Item1 သည် "myArea" ဟူသော အမည်ကို ရရှိပြီး ကော်လံငါးခုကို ဇယားကွက်အပြင်အဆင်တွင် ကော်လံငါးခုလုံးကို ဖြန့်ကျက်ထားသည်။
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
အတန်းတစ်ခုစီကို apostrophes ('') ဖြင့် သတ်မှတ်သည်
အတန်းတစ်ခုစီရှိ ကော်လံများကို နေရာလွတ်တစ်ခုဖြင့် ပိုင်းခြားထားသော apostrophes အတွင်းတွင် သတ်မှတ်ထားသည်။
မှတ်ချက်- ကာလနိမိတ်သည် အမည်မရှိသော ဇယားကွက်တစ်ခုကို ကိုယ်စားပြုသည်။
ဥပမာ
"myArea" သည် ကော်လံငါးခုဇယားကွက်အပြင်အဆင်တွင် ကော်လံနှစ်ခုကို ချဲ့ထားပါစေ (ကာလနိမိတ်လက္ခဏာများသည် အမည်မရှိသောအရာများကို ကိုယ်စားပြုသည်-
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
. . .';
}
အတန်းနှစ်ခုကို သတ်မှတ်ရန်၊ အခြား apostrophes အစုအတွင်းရှိ ဒုတိယအတန်း၏ကော်လံကို သတ်မှတ်ပါ-
ဥပမာ
ကော်လံနှစ်ခု နှင့် အတန်းနှစ်တန်း ကို "item1" ချဲ့ရန် -
.grid-container {
grid-template-areas: 'myArea myArea
. . .' 'myArea myArea . . .';
}
ဥပမာ
ပစ္စည်းအားလုံးကို အမည်ပေးပြီး အဆင်သင့်သုံးနိုင်သော ဝဘ်စာမျက်နှာ နမူနာတစ်ခု ပြုလုပ်ပါ-
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 {
grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area:
footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main
main main right right'
'menu footer footer footer footer
footer';
}
ပစ္စည်းများ၏အမှာစာ
Grid Layout သည် ကျွန်ုပ်တို့နှစ်သက်သည့်နေရာတိုင်းတွင် အရာများကို နေရာချထားနိုင်စေပါသည်။
HTML ကုဒ်ရှိ ပထမအရာသည် ဇယားကွက်ရှိ ပထမဆုံးအရာအဖြစ် ပေါ်လာရန် မလိုအပ်ပါ။
၁
၂
၃
၄
၅
၆
ဥပမာ
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
မီဒီယာမေးမြန်းချက်များကို အသုံးပြုခြင်းဖြင့် အချို့သော မျက်နှာပြင်အရွယ်အစားများအတွက် အမှာစာအား ပြန်လည်စီစဉ်နိုင်သည်-
ဥပမာ
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 /
span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 /
span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6
{ grid-area: 2 / 3 / 3 / 4; }
}