Media Queries က screen width, orientation, device capability စတဲ့ condition တွေနဲ့ CSS rule ကို apply လုပ်ပေးတဲ့နည်းလမ်းပါ။ ဥပမာ desktop မှာ card ၃ ခုဘေးတိုက်ပြပြီး mobile မှာ card တွေကိုအပေါ်အောက်စီချင်တဲ့အခါ media query သုံးနိုင်ပါတယ်။
css
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Tablet and small screens */
@media screen and (max-width: 900px) {
.cards {
grid-template-columns: repeat(2, 1fr);
}
}
/* Phones */
@media screen and (max-width: 600px) {
.cards {
grid-template-columns: 1fr;
}
}You should see
Desktop မှာ card ၃ column၊ tablet မှာ ၂ column၊ phone မှာ ၁ column အဖြစ်ပြောင်းသွားပါမယ်။Warning
Breakpoint ကို phone model တစ်ခုတည်းကိုမူတည်ပြီးမသတ်မှတ်ပါနဲ့။ Content ပျက်တဲ့နေရာကိုကြည့်ပြီး breakpoint ထားတာပိုမှန်ပါတယ်။