📝 جلسه چهارم – پیاده‌سازی Grid System اختصاصی (شروع طراحی مینی فریم‌ورک CSS) – بخش اول

1️⃣ پیاده‌سازی Grid System اختصاصی:

• ایجاد یک سیستم گرید شخصی‌سازی شده بدون استفاده از فریم‌ورک آماده.
• هدف: یادگیری ساختار و منطق گرید در طراحی رسپانسیو.

2️⃣ محاسبه عرض ستون‌ها:

• عرض هر ستون = (عرض کل / تعداد ستون‌ها) – حاشیه (gutter).
• می‌توان ستون‌ها را به صورت نسبتی یا درصدی تعریف کرد تا انعطاف‌پذیر باشند.

3️⃣ نام‌گذاری ستون‌ها (Column Naming):

• تعیین کلاس‌ها برای ستون‌ها مثل .col-1, .col-2 … .col-12
• ساده‌سازی استفاده و خوانایی کدها.

4️⃣ پیاده‌سازی در Media Queries استاندارد:

• تغییر اندازه و تعداد ستون‌ها بر اساس عرض صفحه:
  • موبایل: 1-2 ستون
  • تبلت: 4-6 ستون
  • دسکتاپ: 12 ستون
• رعایت اصول رسپانسیو در هر breakpoint.

5️⃣ مزایا:

• کنترل کامل روی طراحی گرید
• تطبیق‌پذیری با انواع صفحه‌ها
• پایه برای ساخت مینی فریم‌ورک CSS شخصی