Exercises: Grid, Position & Responsive Challenge

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

ဒီ lesson က ပထမ exercise ထက် တစ်ဆင့်တက်ပြီး, layout system တစ်ခုတည်းကို သုံးမယ့်အစား CSS Grid, positioning, custom properties (variables), pseudo-class/element နဲ့ responsive breakpoint တွေကို တွဲသုံးရမှာဖြစ်ပါတယ်။ Real project တစ်ခုမှာ ကြုံရတတ်တဲ့ “badge ပါတဲ့ product grid, responsive ဖြစ်ရမယ်” ဆိုတဲ့ scenario ကို simulate လုပ်ထားပါတယ်။ Task တွေက တစ်ခုနဲ့တစ်ခု ချိတ်ဆက်နေတာမို့ အစီအစဉ်တကျ လုပ်ရင် ပိုလွယ်ပါတယ်။ ဒီ exercise ကို ပြီးအောင်လုပ်နိုင်ရင် Intermediate နဲ့ Advanced chapter ထဲက concept အများစုကို ကိုယ်တိုင် apply လုပ်နိုင်ပြီလို့ ယုံကြည်လို့ရပါတယ်။

လေ့ကျင့်ခန်းများ

Task 1: :root မှာ --gap: 16px, --primary: #2563eb ဆိုတဲ့ CSS variables 2 ခု declare လုပ်ပြီး, .grid container မှာ display: grid, grid-template-columns: repeat(3, 1fr), gap: var(--gap) သုံးပါ။ Task 2: .grid-item တစ်ခုချင်းစီကို position: relative ထားပြီး, ::before pseudo-element သုံးပြီး ညာဘက်ထောင့်အပေါ်မှာ “NEW” ဆိုတဲ့ badge ကို position: absolute နဲ့ တင်ပါ (background: var(--primary))။ Task 3: .grid-item:nth-child(odd) selector သုံးပြီး odd items တွေကို background color ကွဲပြားအောင် ပြောင်းပါ။ Task 4: @media (max-width: 600px) query ထည့်ပြီး screen ကျဉ်းတဲ့အခါ grid-template-columns ကို 1 column ပြောင်းပါ။

CSS variables declare လုပ်ပြီး grid layout မှာ အသုံးပြုပါ
position: relative/absolute နဲ့ ::before pseudo-element သုံးပြီး badge ဆောက်ပါ
nth-child selector နဲ့ media query သုံးပြီး responsive style ပြောင်းပါ

Code နမူနာ

css

/* Starter skeleton - fill in the blanks */
:root {
  /* Task 1: --gap, --primary variables */
}

.grid {
  /* Task 1: display, grid-template-columns, gap */
}

.grid-item {
  position: relative;
  padding: 20px;
  border-radius: 8px;
  background: #f3f4f6;
}

.grid-item::before {
  /* Task 2: content: "NEW"; position: absolute; top/right; background: var(--primary) */
}

.grid-item:nth-child(odd) {
  /* Task 3: alternate background color */
}

@media (max-width: 600px) {
  .grid {
    /* Task 4: single column layout */
  }
}

You should see

Desktop မှာ 3-column grid, NEW badge ပါတဲ့ card တွေ odd/even အလိုက် background ကွဲပြီး, screen 600px အောက်ကျရင် 1-column layout ကို auto ပြောင်းသွားမှာဖြစ်ပါတယ်။

၅ မိနစ် စမ်းကြည့်

Task 1-4 ကို အစီအစဉ်အတိုင်း လုပ်ပြီး, browser window ကို resize လုပ်ကြည့်ပြီး responsive breakpoint အလုပ်လုပ်မလုပ် 5 မိနစ်အတွင်း စစ်ဆေးကြည့်ပါ။

သတိလေးတစ်ချက်

Media query ကို mobile-first (min-width) နဲ့ desktop-first (max-width) ဆိုပြီး style နှစ်မျိုးရှိပါတယ် — project တစ်ခုတည်းထဲမှာ mix မလုပ်ဘဲ တစ်မျိုးတည်း consistent ဖြစ်အောင် ရွေးသုံးပါ။