🧩 جلسه پنجم – پیاده‌سازی Grid System اختصاصی (بخش دوم)

📘 مفاهیم مهم:

• مفهوم row:
  هر ردیف (row) در گرید، مجموعه‌ای از ستون‌ها (column) را در بر می‌گیرد و برای مرتب‌سازی افقی المان‌ها استفاده می‌شود.
• چیدمان صحیح ستون‌ها در کنار هم:
  ستون‌ها باید داخل یک row قرار گیرند تا ساختار گرید به‌درستی عمل کند.
  در غیر این صورت، ستون‌ها در خطوط مجزا نمایش داده می‌شوند یا نظم شبکه از بین می‌رود.

• ساختار پایه سیستم گرید:

   

  <div class="container">
    <div class="row">
      <div class="col-12 col-md-3">...</div>
      <div class="col-12 col-md-9">...</div>
    </div>
  </div>

• تمرکز روی ریسپانسیو بودن:
  با استفاده از کلاس‌های ترکیبی مثل col-12 col-md-3 یا col-12 col-md-9، ستون‌ها در صفحه‌های کوچک به‌صورت عمودی و در صفحه‌های بزرگ‌تر به‌صورت افقی کنار هم نمایش داده می‌شوند.
• افزودن فاصله بین ستون‌ها (gutter):
  از کلاس‌هایی مثل g-1, g-3 برای تنظیم فاصله بین ستون‌ها استفاده شد.