CSS grid-ဧရိယာ ပိုင်ဆိုင်မှု
ဥပမာ
"item1" ကို အတန်း 2 ကော်လံ 1 တွင် စတင်စေပြီး 2 တန်းနှင့် 3 ကော်လံကို ချဲ့ပါ-
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ပိုင်ဆိုင်မှုသည် ဂ ရစ် grid-area
ပစ္စည်းတစ်ခု၏ အရွယ်အစားနှင့် တည်နေရာကို ဇယားကွက်အပြင်အဆင်တွင် သတ်မှတ်ပေးကာ အောက်ပါဂုဏ်သတ္တိများအတွက် လက်တိုပိုင်ဆိုင်မှုတစ်ခုဖြစ်သည်-
ဇယား grid-area
ကွက်တစ်ခုသို့ အမည်တစ်ခု သတ်မှတ်ရန် ပိုင်ဆိုင်မှုကိုလည်း အသုံးပြုနိုင်သည်။ ထို့နောက် grid container ၏ grid-template- areas ပိုင်ဆိုင်မှု ဖြင့် အမည်ပေးထားသော grid items များကို ကိုးကား
နိုင်ပါသည်။ အောက်ပါဥပမာများကိုကြည့်ပါ။
မူလတန်ဖိုး: | car/car/car/car |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | ဟုတ်တယ် ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS Grid Layout Module အဆင့် ၁ |
JavaScript syntax- | အရာဝတ္ထု .style.gridArea="1 / 2 / span 2 / span 3" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
grid-area | 57 | 16 | 52 | 10 | 44 |
CSS Syntax
grid-area: grid-row-start / grid-column-start / grid-row-end /
grid-column-end | itemname;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description |
---|---|
grid-row-start | Specifies on which row to start displaying the item. |
grid-column-start | Specifies on which column to start displaying the item. |
grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
itemname | Specifies a name for the grid item |
နောက်ထပ် ဥပမာများ
ဥပမာ
Item1 သည် "myArea" ဟူသော အမည်ကို ရရှိပြီး ကော်လံငါးခုကို ဇယားကွက်အပြင်အဆင်တွင် ကော်လံငါးခုလုံးကို ဖြန့်ကျက်ထားသည်။
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
ဥပမာ
"myArea" သည် ကော်လံငါးခုဇယားကွက်အပြင်အဆင်တွင် ကော်လံနှစ်ခုကို ချဲ့ထားပါစေ (ကာလနိမိတ်လက္ခဏာများသည် အမည်မရှိသောအရာများကို ကိုယ်စားပြုသည်-
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea . . .';
}
ဥပမာ
ကော်လံနှစ်ခုနှင့် အတန်းနှစ်တန်းကို "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';
}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS Grid Layout