Subgrid

CSS grid layout ကိုတော့ ရင်းနီးကြပြီးသားဖြစ်လိမ့်မယ်။

subgrid ရဲ့ ရည်ရွယ်ချက်ကတော့ parent grid ရဲ့ grid line တွေကို child grid တွေကနေ တိုက်ရိုက် inherit လုပ်နိုင်ဖို့ပါပဲ။

ဘာကြောင့်လဲဆိုရင် child item တွေအချင်းချင်းကြားမှာ တူညီတဲ့ layout တွေကို ရရှိနိုင်ဖို့ဖြစ်ပါတယ်။

အောက်က design နှစ်ခုကိုကြည့်လိုက်မယ်ဆိုရင် သဘောပေါက်နိုင်ပါတယ်။

Subgrid မရှိခင်က

Subgrid သုံးထားတဲ့အခါ

subgrid မရှိခင်ကလည်း အဆင်ပြေအောင်လုပ်လို့ရပါတယ်၊ ဒါပေမယ့် subgrid ကိုသုံးရတာက ပိုပြီး လွယ်ကူရိုးရှင်းပါတယ်။

subgrid ကို grid-template-rows သို့မဟုတ် grid-template-columns မှာသတ်မှတ်ပေးရပါတယ်

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
}

grid line တွေ ဘယ်လို inherit လုပ်သွားသလဲဆိုတာကို dev tool သုံးပြီးတော့ အလွယ်တူကြည့်လို့ရပါတယ်။ ရိုးရှင်းတဲ့ article ကို ဒီမှာသွားဖတ်လို့ရပါတယ်။

https://web.dev/articles/css-subgrid

အသေးစိတ်ကိုတော့ MDN မှာသွားဖတ်လို့ရပါတယ်။