grid-template ပိုင်ဆိုင်မှု

grid-template ပိုင်ဆိုင်မှုသည် ဂရစ်တ်တစ်ခု သို့မဟုတ် ဂရစ်တ်ထဲရှိ အစိတ်အပိုင်းတစ်ခု သိမ်းပိုက်မည့် အတန်းများနှင့် ကော်လံများ၏ အရေအတွက်နှင့် အကျယ်ကို သတ်မှတ်ပေးပြီး grid-template-rows နှင့် grid-template-columns ပိုင်ဆိုင်မှုများ၏ အတိုကောက်ပုံစံ ဖြစ်သည်။ အစိတ်အပိုင်းတစ်ခု တည်ရှိမည့် အတန်းများနှင့် ကော်လံများကို Slash (/) ဖြင့် ခွဲခြားပြသသည်။ grid-template ပိုင်ဆိုင်မှုကို မိဘအစိတ်အပိုင်းတွင် သတ်မှတ်ပြီး သားသမီးအစိတ်အပိုင်းများ၏ တည်နေရာကို သတ်မှတ်ပေးသည်။ ပိုင်ဆိုင်မှု၏ တန်ဖိုးတွင် အတန်းများ သို့မဟုတ် ကော်လံများ၏ အကျယ်ကို မည်သည့် အရွယ်အစား ယူနစ်များနှင့်မဆို သတ်မှတ်နိုင်သည်။

ပိုင်ဆိုင်မှုများတွင် ပစ်ဆယ်တန်ဖိုးများကို သတ်မှတ်ပါက အစိတ်အပိုင်းများ၏ အရွယ်အစားများသည် ၎င်းတို့နှင့် အတိအကျ ကိုက်ညီမည်။ auto စကားလုံးကို သတ်မှတ်ပါက၊ ကော်လံများနှင့် အတန်းများသည် ရရှိနိုင်သော နေရာအား အားလုံးကို ဖြည့်ပေးမည်။ fr (fraction) ယူနစ်ကို အသုံးပြုခြင်းသည် နေရာအားလုံးကို တူညီသော အပိုင်းများအဖြစ် ပိုင်းခြားမည် ဟု ဆိုလိုသည်။ fr ၏ အားသာချက်မှာ ၎င်း၏ ကွန်တိန်နာ သို့မဟုတ် ဖန်သားပြင် ခွင့်ပြုချက် အမျိုးမျိုးနှင့် လိုက်လျောညီထွေရှိမှုဖြစ်ပြီး၊ fr သည် ပစ်ဆယ်ဖြင့် တိကျသော အရွယ်အစားနှင့် မချိတ်ဆက်ဘဲ သတ်မှတ်ထားသော အပိုင်းအခြေအတွက် ၎င်းတို့ကို ရိုးရှင်းစွာ ပိုင်းခြားပေးသည်။

ဝါကျဖွဲ့ပုံ

cssselector {
  grid-template: အတန်းများ၏ အကျယ်နှင့် အရေအတွက် / ကော်လံများ၏ အကျယ်နှင့် အရေအတွက်;
}

ဥပမာ

grid-template ပိုင်ဆိုင်မှုကို အသုံးပြု၍ ဇယားတစ်ခု ဖန်တီးကြပါစို့:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

ယခု ဒုတိယနှင့် တတိယ အတန်းများအတွက် တူညီသော အကျယ်ကို သတ်မှတ်ပြီး ကော်လံတစ်ခုစီအတွက် ကွဲပြားသော အကျယ်ကို သတ်မှတ်ကြပါစို့:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 60px 1fr 60px / 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

ယခု ယခင် ဥပမာမှ ဇယားထဲတွင် ထိပ်ဆုံးအတန်း၏ အကျယ်ကို အပိုင်းနှစ်ပိုင်းအဖြစ်လည်းကောင်း၊ ပထမဆုံး ကော်လံ၏ အကျယ်ကို တစ်ဝက်အပိုင်းအဖြစ်လည်းကောင်း ပြုလုပ်ကြပါစို့:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဤအရာကိုလည်း ကြည့်ပါ