📘 جلسه دهم – طراحی رسپانسیو با Grid (بخش دوم)

🧱 Grid در Tailwind
• فعال‌سازی گرید با grid
• تعیین تعداد ستون‌ها با grid-cols-*
• ریسپانسیو کردن با breakpointها
grid-cols-1 md:grid-cols-2 lg:grid-cols-4

📐 کنترل فاصله‌ها
• فاصله بین آیتم‌ها: gap-*
• فاصله افقی / عمودی جداگانه:
gap-x-* ، gap-y-*
• gap مخصوص Grid و Flex هست (برخلاف space-*)

📏 کنترل اندازه ستون‌ها
• ستون‌های مساوی: grid-cols-3
• ستون‌های خودکار: grid-cols-auto
• ترکیب آزاد با arbitrary value:
grid-cols-[200px_1fr_2fr]

🔁 کنترل span آیتم‌ها
• گرفتن چند ستون: col-span-*
• ریسپانسیو span:
col-span-12 md:col-span-6 lg:col-span-4

📦 کنترل ردیف‌ها
• تعداد ردیف‌ها: grid-rows-*
• span ردیف: row-span-*

📍 جای‌گذاری آیتم‌ها
• شروع ستون: col-start-*
• پایان ستون: col-end-*
• مفید برای layoutهای خاص و نامتقارن

📱 الگوی رایج ریسپانسیو
• موبایل: تک ستون
• تبلت: دو ستون
• دسکتاپ: چند ستون
(همیشه از کوچک به بزرگ تنظیم کن)

⚠️ نکات مهم
• Grid بهترین انتخاب برای layoutهای دوبعدی (سطر + ستون)
• برای فاصله بین آیتم‌ها → gap نه margin
• ریسپانسیو کردن Grid کاملاً کلاس‌محوره، بدون مدیا کوئری دستی
• ترتیب نمایش آیتم‌ها عوض نمی‌شه مگر با order-*