စက်ရုံး grid-template အကိုးအချုပ်

အသုံးပြုခြင်း နှင့် ဖော်ပြချက်

grid-template အကိုးအချုပ် သည် အောက်ပါ အကိုးအချုပ်များ၏ အကျယ်အဝန်း ဖြစ်ပါသည်:

တကယ်လည်း ကျွန်ုပ်ကို ကျွန်ုပ်ကြည်းသည်:

CSS ဖော်ပြချက်:CSS 网格项目

CSS စာရင်းသုံးစံ:grid-area အကိုးအချုပ်

CSS စာရင်းသုံးစံ:grid-template-rows အကိုးအချုပ်

CSS စာရင်းသုံးစံ:grid-template-columns အကိုးအချုပ်

CSS စာရင်းသုံးစံ:grid-template-areas အကိုးအချုပ်

အမှတ်ပြ

အကြောင်းအရာ 1

ပုံစံ 150 ပမာဏ ကျယ်ပြန့်သော သုံးလုံး စတင်ဆက်သည့် အဆင်းချိန်းကို ပြုလုပ်ပါ:

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

ကိုယ်တိုင် ကျယ်ပြန်ကြည့်

အမှတ် 2

နှစ်ခုတွင် အပြင်ဘက် အသားအရွယ် ကြိုးပမ်း ပြီး "item1" က အချက်အလက်များတွင် ပထမဆုံး နှစ်ခုတွင် ပထမဆုံး နှစ်ခုကို အသုံးပြုသည် (ငါးလက္ခဏာ ကွင်းသဘောတူ တွင်):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template:
    'myArea myArea . . .'
    'myArea myArea . . .';
}

ကိုယ်တိုင် ကျယ်ပြန်ကြည့်

အမှတ် 3

အားလုံးသုံး အချက်အလက်များ အား ပြင်ဆင်ပြီး ပဒေသော ဝတ္ထုပုံစံ ကို ပြုလုပ်ပါ

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

ကိုယ်တိုင် ကျယ်ပြန်ကြည့်

CSS ဘာသာပြန်

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
ဘာသာပြန်အချက်အလက်
အချက်အလက် ဖော်ပြ
none မည်သည်မဆို
grid-template-rows / grid-template-columns အသားအရွယ် ကြိုးပမ်း
grid-template-areas အမည်သုံးစံသဘောတူ ကွင်းသဘောတူကို အသုံးပြုသည်
initial ဘာသာပြန်ကို မူကြမ်း ဘာသာပြန်ကို တစ်ကြိမ်တစ်ရံ ကို စတင်ထားပါ initial.
inherit မူကြမ်း ဘာသာပြန်ကို ထိုဘာသာပြန်မှ တွင်းထုတ်ပြန်ထားပါ inherit.

နည်းပါးဆိုင်ရာ

မည်သည်မဆို none none none
ကြိုးပမ်း ထိပ်
လှည့်ပတ်ကုသ ထောက်ပံ့လှည့်ပတ်သဘောတူ အချက်အလက်.
ပုံစံ: CSS Grid Layout Module Level 1
JavaScript ဘာသာပြန် object.style.gridTemplate="250px / auto auto"

ဘာသာပြန်ထောက်ပံ့

အချက်အလက်များတွင် အထူးသတ်မှတ်ထားသော ဘာသာပြန်အသုံးပြုသည့် ဘာသာပြန်သဘောတူသည့် ဘာသာပြန်ကို ထောက်ပံ့ပေးသော ဘာသာပြန်ကွင်းသဘောတူကို ကို အချက်အလက်တွင် ထည့်သွင်းထားပါ

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44