CSS Grid

Grid စသုံးမယ်

Grid ကို စတင်အသုံးပြုဖို့အတွက် အဓိက Parent Element (Container) မှာ display: grid; ဆိုပြီး ကြေညာပေးရပါတယ်။

.container {
  display: grid;
}

Container Properties (Parent Element တွင် သုံးရန်)

1. Columns & Rows သတ်မှတ်ခြင်း

Grid တစ်ခုကို တည်ဆောက်တဲ့အခါ ဒေါင်လိုက် ကော်လံ (Column) ဘယ်နှခု ပါမလဲ၊ အလျားလိုက် အတန်း (Row) ဘယ်နှခု ပါမလဲဆိုတာကို အရင်ဆုံး သတ်မှတ်ပေးရပါတယ်။

.container {
  display: grid;
  /* 200px စီရှိတဲ့ ကော်လံ ၃ ခု */
  grid-template-columns: 200px 200px 200px;

  /* 100px စီရှိတဲ့ အတန်း ၂ ခု */
  grid-template-rows: 100px 100px;
}

2. Fraction Unit (fr)

Layout အကျယ်ကို Pixel တွေနဲ့ အသေ မသတ်မှတ်ချင်ဘူးဆိုရင်တော့ Grid ရဲ့ သီးသန့် Unit ဖြစ်တဲ့ fr (Fraction) ကို အသုံးပြုနိုင်ပါတယ်။ fr ဆိုတာကတော့ “ကျန်ရှိနေတဲ့ နေရာလွတ်ကို အချိုးကျ ခွဲဝေယူမယ်” လို့ အဓိပ္ပာယ်ရပါတယ်။

.container {
  display: grid;
  /* ပထမကော်လံက 1 ပုံ၊ ဒုတိယကော်လံက 2 ပုံ (စုစုပေါင်း 3 ပုံ) */
  grid-template-columns: 1fr 2fr;
}

3. Repeat Function

တူညီတဲ့ အရွယ်အစားတွေ ရှိတဲ့ ကော်လံတွေကို ထပ်ခါထပ်ခါ အများကြီး ရေးနေရတဲ့ ဒုက္ခက သက်သာအောင် repeat() Function ကို အသုံးပြုနိုင်ပါတယ်။

.container {
  /* 1fr ရှိတဲ့ ကော်လံ ၃ ခု (1fr 1fr 1fr နဲ့ အတူတူပါပဲ) */
  grid-template-columns: repeat(3, 1fr);
}

4. Grid Gap (ကွက်လပ်)

Column တွေ Row တွေ ကြားမှာ Margin တွေ တွက်ပြီး ခွာနေစရာ မလိုတော့ပါဘူး။ gap ကို သုံးလိုက်တာနဲ့ အဲဒီကြားက ကွက်လပ်တွေကို အလိုလို ခြားပေးသွားမှာပါ။

.container {
  column-gap: 1rem; /* ကော်လံတွေကြားက ကွက်လပ် */
  row-gap: 10px;    /* အတန်းတွေကြားက ကွက်လပ် */
  /* shorthand */
  gap: 10px 1rem;   /* ပထမတန်ဖိုး = row-gap, ဒုတိယတန်ဖိုး = column-gap */
}

5. Grid Template Areas (ဧရိယာ သတ်မှတ်ခြင်း)

Grid Layout ထဲက ဧရိယာတွေကို မိမိစိတ်ကြိုက် နာမည်လေးတွေ ပေးပြီး စီမံချင်တဲ့အခါမှာ ဒါက အရမ်းကို အသုံးဝင်ပါတယ်။

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

Item Properties (Child Element များတွင် သုံးရန်)

Grid ကြီးထဲမှာ ပါဝင်တဲ့ Item သေးသေးလေးတွေက ဘယ်ကနေ ဘယ်နေရာအထိ ယူမလဲ ဆိုတာကို သီးသန့် သတ်မှတ်ပေးလို့ ရပါတယ်။

1. Grid Column & Row (နေရာယူခြင်း)

Grid ထဲက Item တစ်ခုကို ဘယ် Line နံပါတ်ကနေ ဘယ် Line နံပါတ်အထိ နေရာယူမလဲ ဆိုတာကို သတ်မှတ်တာပါ။ (Grid Line တွေရဲ့ နံပါတ်က အမြဲတမ်း 1 ကနေ စတယ်ဆိုတာ သတိပြုပါ)

.item-1 {
  /* Column Line 1 ကနေ 3 အထိ (ကော်လံ ၂ ခုစာ နေရာယူမယ်) */
  grid-column-start: 1;
  grid-column-end: 3;

  /* Shorthand: grid-column: 1 / 3; */
}

.item-2 {
  /* Row Line 2 ကနေ 4 အထိ */
  grid-row: 2 / 4;
}

2. Span (ထပ်ပေါင်းခြင်း)

Line နံပါတ်တွေကို သေချာ မမှတ်မိဘူးဆိုရင်လည်း၊ လွယ်လွယ်ကူကူ ဘယ်နှကွက် နေရာယူမလဲ ဆိုတာကို span ကို သုံးပြီး သတ်မှတ်ပေးလို့ ရပါသေးတယ်။

.item {
  grid-column: span 2; /* ကော်လံ ၂ ခုစာ နေရာယူမယ် */
}

3. Grid Area (နာမည်ဖြင့် နေရာချခြင်း)

ရှေ့မှာ Container ကြီးအတွက် grid-template-areas ကို သုံးပြီး ဧရိယာ နာမည်တွေ သတ်မှတ်ခဲ့တာ မှတ်မိတယ်မလား။ အခု အဲဒီ သတ်မှတ်ခဲ့တဲ့ နာမည်တွေကို Item လေးတွေမှာ ပြန်ချိတ်ဆက်ပြီး ခေါ်သုံးတာ ဖြစ်ပါတယ်။

ဥပမာအနေနဲ့ ပြောရရင် - Container မှာ "header header header" ဆိုပြီး နေရာပေးခဲ့တယ်ဆိုပါစို့။ အဲဒါဆိုရင် Header Element လေးမှာ grid-area: header; လို့ ပေးလိုက်တာနဲ့ သူက အဲဒီနေရာကို အလိုလို ရောက်သွားမှာ ဖြစ်ပါတယ်။ Line နံပါတ်တွေ ခေါင်းရှုပ်ခံပြီး လိုက်မှတ်နေစရာ မလိုတော့ဘူးပေါ့။

header class ရှိတဲ့ html element က header လို့ သတ်မှတ်ထားတဲ့ နေရာအကုန် (ဒီမှာဆိုရင် Container ရဲ့ အပေါ်ဆုံး အတန်း)ကို နေရာယူပါမယ်။

.header {
  grid-area: header; /* Container မှာ သတ်မှတ်ခဲ့တဲ့ နာမည် */
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.footer {
  grid-area: footer;
}

Alignment (ညှိခြင်း)

Flexbox မှာ Item တွေကို Alignment ညှိလို့ရသလိုမျိုးပဲ၊ Grid မှာလည်း မိမိစိတ်ကြိုက် နေရာညှိလို့ ရပါတယ်။

justify-content: Grid တစ်ခုလုံးကို Container အတွင်း ဘယ်ညာ ညှိခြင်း
align-content: Grid တစ်ခုလုံးကို Container အတွင်း အပေါ်အောက် ညှိခြင်း
justify-items: Cell အတွင်းက Content ကို ဘယ်ညာ ညှိခြင်း (start, end, center, stretch)
align-items: Cell အတွင်းက Content ကို အပေါ်အောက် ညှိခြင်း (start, end, center, stretch)