Grid Container

Grid container မှာ grid-template-columns နဲ့ column အရွယ်အစားတွေသတ်မှတ်နိုင်ပါတယ်။ fr unit က available space ကို fraction အနေနဲ့ခွဲယူတာပါ။ Responsive grid အတွက် repeat(), auto-fit, minmax() တွေက အလွန်အသုံးဝင်ပါတယ်။

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.card {
  padding: 20px;
  border-radius: 16px;
}

Screen ကျယ်ရင် card တွေ column အများကြီးဖြစ်မယ်။ Screen ကျဉ်းလာရင် auto stack လုပ်သွားမယ်။ Media query မရေးဘဲ responsive grid တစ်ခုရလာပါမယ်။