می‌دونستی با auto-fit و minmax() می‌تونی یه Grid کاملاً ریسپانسیو بسازی، بدون اینکه حتی یک Media Query بنویسی؟ 👀
.cards {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(250px, 1fr)
);
gap: 20px;
}
💡 چطور کار می‌کنه؟
* 250px حداقل عرض هر کارته.
* 1fr فضای باقی‌مونده رو تقسیم می‌کنه.
* auto-fit تعداد ستون‌ها رو متناسب با فضای موجود تنظیم می‌کنه.
🔥 نتیجه؟ کارت‌ها به‌صورت خودکار با اندازه صفحه سازگار می‌شن؛ بدون نیاز به Media Query!
PARSE-X