စက်တင် အစိတ်အဆင်း-အနောက်

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

grid-template-areas အခြေအနေ ကွဲပြားသော အပိုင်းများ ကို မြောက်ပြီး ပြင်းပြတ်သည်။

သင့် အသုံးပြုနိုင်သည် grid-area ရေးသားခြင်း အမှတ်ပေးခြင်း အစီအစဉ် ပြုလုပ်ပြီးနောက် grid-template-areas အခြေအနေ တွင် အမှတ်ပေးခြင်း ခေါ်သည်။

အချက်အလက်များကို အစိတ်အစိတ်ထားသော ဘာသာစကား အသုံးပြုပါ။ အမည်မပါဘဲရှိသော အစီအစဉ် အချက်အလက်များကို အကြောင်းပြုရန် ကိုယ်တိုင် ကျင်းပပါ

အခြား ကူးကြော်ရေး

CSS အော်ပရာCSS အုပ်စု လုပ်ငန်း

CSS ပြည့်ပြည့်စာအုပ်grid-area အချက်အလက်

CSS ပြည့်ပြည့်စာအုပ်grid-template အချက်အလက်

အမှတ်

အမှတ် 1

အမည်ပြုထားသော အဆိုပါ အချက်အလက် "myArea" က ငါးလုံး အစီအစဉ် တွင် နှစ်လုံး အစီအစဉ် ကူးကြော်ရေး

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

ကိုယ်တိုင် ကျင်းပပါ

အမှတ် 2

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

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas:
    '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-areas:
    'header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

ကိုယ်တိုင် ကျင်းပပါ

CSS ဘာသာစကား

grid-template-areas: none|itemnames;

အချက်အလက်

အတ္ထုပ္ပတ္ ဖော်ပြ
none မူးယစ်ဆေး
itemnames ခုနစ်ချက်အချက်အလက်များကို အကျိုးဆက်သော ဘာသာစကား ကူးကြော်ရေး

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

မူးယစ်ဆေး none
တိုက်ရိုက်လက်ခံ မမရှိ
လှည့်ပတ်သည့် ပုံစံ ကူးကြော်ရေးလှည့်ပတ်သည့် အချက်အလက်。
ပုံစံ CSS Grid Layout Module Level 1
JavaScript ဘာသာစကား object.style.gridTemplateAreas=". . . myArea myArea"

ဘာသာစကား ကူးကြော်ရေး

အချက်အလက်များတွင် အကျိုးဆက်သော ဘာသာစကား အသုံးပြုပါ။

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