အတွင်းစီ CSS Grids များ

Grid စနစ်တွင် မိမိကိုယ်တိုင် ဖန်တီးထားသော ကွန်ရက်ထဲသို့ နောက်ထပ် အတွင်းစီ grid တစ်ခု ထည့်သွင်းနိုင်သော အခွင့်အရေးရှိပါသည်။ အတွင်းစီ grids များကို ဝဘ်ဆိုဒ် ဘလော့ခ်များအတွင်းရှိ အသေးစား အစိတ်အပိုင်းများကို နေရာချရာတွင် ကျယ်ကျယ်ပြန့်ပြန့် အသုံးပြုကြပါသည်။ ဤအခွင့်အရေးကို အသုံးပြုနိုင်ရန်အတွက် သားစဉ်မြေးဆက် အစိတ်အပိုင်းကိုယ်တိုင်ထဲတွင် display ဂုဏ်သတ္တိကို grid တန်ဖိုးဖြင့် သတ်မှတ်ပေးရန် လိုအပ်ပါသည်။

ဥပမာအားဖြင့် grid ၏ ဆဲလ်တစ်ခုထဲတွင် နောက်ထပ် grid တစ်ခု ဖန်တီးကြည့်ကြပါစို့။

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
</div>

css#parent {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  grid-gap: 5px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 5px;
  border: 2px solid #696989;
}
#elem4 > div {
  grid-gap: 5px;
  padding: 6px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат: