စတုံးပေါင်း အော်ဂန်း အကိုးအကာ
子元素（项目）
网格容器包含网格项目。
ပုံမှာ အသုံးပြုရာတွင် ဘလောက်အော်၏ တန်းချိန်၏ တန်းအချိန်၏ အဆင်းများ အပေါ် အဆင်းများ သုံးဆောင်သည်။ သို့သော် သုံးဆောင်သည့် အဆင်းများ၏ အစိတ်အပိုင်းများ ကို ဖြည့်စွက်နိုင်ပါ။
grid-column အက္ခရာများ：
grid-column အက္ခရာမှာ အဆင်းများ အပေါ် အဆင်းများ အပေါ် သုံးဆောင်ရန် အသုံးပြုပါ။
您可以定义项目的开始位置以及结束位置。
အစီရင်ခံစာ:grid-column grid-column-start နှင့် grid-column-end အက္ခရာများ၏ ပါဝင်သည့် အက္ခရာများ ဖြစ်သည်။
သုံးဆောင်ရန် တခုခု၏ နေရာကို ရွှေ့ပြောင်းလိုက်တာ ဖြစ်ရန် ဘလောက်အော် လိုင်းလုပ်မှုများ (line numbers) ကို ကိုးကွယ်လိုက်တာ သို့မဟုတ် "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 属性是 grid-row-start 和 grid-row-end 属性的简写属性。
အကိုးး ပြင်ဆင်ရန် ပြင်ဖော်ကြိုး အမှတ် ကို ကိုးကွယ်နိုင်သည် သို့မဟုတ် "span" သံသာဒေါင်း ကို အသုံးပြု၍ အကိုးး ကို နှစ်ခုခု ဖြင့် အုပ်ချုပ်ထားနိုင်သည်:
实例
"item1" ကို row-line 1 မှ စတင်၍ row-line 4 အထိ အုပ်ချုပ်ထားသည်:
.item1 {
grid-row: 1 / 4;
}
实例
"item1" ကို ပထမ ရပ် မှ စတင်၍ 2 ရပ် ဖြင့် အုပ်ချုပ်ထားသည်:
.item1 {
grid-row: 1 / span 2;
}
grid-area အကိုင်းအချုပ်
grid-area အကိုင်းအချုပ် အကိုးး အကိုင်းအချုပ် ကို grid-row-start, grid-column-start, grid-row-end နှင့် grid-column-end အကိုးး အကိုးး အား အင်္ဂါလိုက် ပြောင်းလဲသုံးနိုင်သည်。
实例
"item8" ကို row-line 1 နှင့် column-line 2 မှ စတင်၍ row-line 5 နှင့် column line 6 အထိ အုပ်ချုပ်ထားသည်:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
实例
"item8" ကို row-line 2 နှင့် column-line မှ စတင်၍ 2 ရပ် နှင့် 3 ရပ် ဖြင့် အုပ်ချုပ်ထားသည်:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
အမည်တပ်ထားသော ကွန်ပိုင်းအကိုးး
grid-area အကိုင်းအချုပ် အကိုးး ကို အမည်တပ်ထားသော ကွန်ပိုင်းအကိုးး အား ချီလက်တူးကာ ပေးနိုင်သည်。
ကွန်ပိုင်းအံ့အား အားဖြင့် grid-template-areas အကိုင်းအချုပ် ကို အမည်တပ်ထားသော ကွန်ပိုင်းအကိုးး ကို ကိုးကွယ်သုံးနိုင်သည်。
实例
item1 အမည်မှာ "မြောက်ကုန်း" ဖြစ်၍ နှစ်ခုသော ကွန်ပိုင်းပုံ စက်ပွဲများ အား နှစ်ခုစလုံး ဖြင့် အုပ်ချုပ်ထားသည်:
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'မြောက်ကုန်း မြောက်ကုန်း မြောက်ကုန်း မြောက်ကုန်း မြောက်ကုန်း';
}
တစ်လျှောက်လျှောက် အစိတ်အတွင်း အသုံးပြုပါ။
တစ်လျှောက်လျှောက် အစိတ်အတွင်း အချက်အလက်များ အသုံးပြုပြီး အချက်အလက်များ အကြား အကွာအဝေးကို အကွာအဝေးအားဖြင့် အသုံးပြုပါ။
အစီရင်ခံစာ:စက်လျှ့များ ကို အသုံးပြုလုပ်ခြင်း မပါဘူး။
实例
"myArea" ကို နှစ်လွှဲ ပုံစံအစီအစဉ်တွင် နှစ်လွှဲ အသုံးပြုပါ။
.item1 {
grid-area: myArea;
}
.grid-container {
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';
}
အရေးအသားပြုလုပ်ခြင်း
ပုံစံအစီအစဉ်သည် ကျွန်ုပ်တို့က ကျွန်ုပ်တို့ကြည်တက်သော နေရာများတွင် အရေးအသားပြုလုပ်နိုင်ပါသည်။
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; }
}
