CSS 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)

Pixel အသေမပေးချင်ရင် fr (fraction) unit ကို သုံးနိုင်ပါတယ်။ “ရှိတဲ့နေရာကို အချိုးကျ ခွဲယူမယ်” လို့ အဓိပ္ပာယ်ရပါတယ်။

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

3. Repeat Function

တူညီတဲ့ Size တွေ အများကြီး ရေးရတာ သက်သာအောင် repeat() ကို သုံးနိုင်ပါတယ်။

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

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

Margin တွေ တွက်နေစရာ မလိုပါဘူး။ gap သုံးလိုက်ရင် ကွက်လပ်တွေ အလိုလို ခြားပေးပါတယ်။

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

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

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 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 လိုပဲ 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)