🧱 فصل لایه‌بندی‌ها در طراحی وب

1️⃣ لایه‌بندی تک‌ستونه (One Column Layout)

• کاربرد: برای وب‌سایت‌های ساده، بلاگ‌ها، صفحات موبایل.
• ویژگی‌ها:
  • محتوای اصلی در یک ستون وسط صفحه نمایش داده می‌شود.

  • ساختار معمولی:

     

    <header></header>
    <main></main>
    <footer></footer>
    

  • پهنا معمولاً با max-width محدود می‌شود تا محتوا خیلی عریض نشود.
• مزیت: طراحی ساده، تمرکز کاربر بر روی محتوا.
• عیب: مناسب پروژه‌های بزرگ یا چندبخشی نیست.

2️⃣ لایه‌بندی دو‌ستونه (Two Columns Layout)

• کاربرد: برای سایت‌های خبری، بلاگ‌ها، و صفحات محصول.

• ساختار:

   

  <header></header>
  <main>
    <section class="content"></section>
    <aside class="sidebar"></aside>
  </main>
  <footer></footer>
  

• روش‌های پیاده‌سازی:
  • float: ستون‌ها با float: left/right چیده می‌شوند.
  • flexbox: انعطاف‌پذیرتر و مدرن‌تر (display: flex; روی container).
  • grid: دقیق‌تر و قابل کنترل‌تر.
• نکته: با flex-direction: row-reverse; می‌توان جای ستون‌ها را عوض کرد.

3️⃣ لایه‌بندی سه‌ستونه (Three Columns Layout)

• کاربرد: برای سایت‌های بزرگ (مثل فروشگاه‌ها یا داشبوردها).

• ساختار نمونه:

   

  <header></header>
  <main>
    <aside class="left"></aside>
    <section class="content"></section>
    <aside class="right"></aside>
  </main>
  <footer></footer>
  

• پیاده‌سازی:
  • با Flexbox: هر ستون با flex: 1 یا width مشخص تنظیم می‌شود.
  • با Grid: مثلاً

  •  grid-template-columns: 200px 1fr 200px;

• نکته مهم: در طراحی ریسپانسیو، ستون‌های کناری در موبایل معمولاً زیر محتوای اصلی قرار می‌گیرند یا حذف می‌شوند.

4️⃣ لایه‌بندی با نوار کناری (Sidebar Layout)

• هدف: نمایش نوار کناری ثابت (sidebar) برای منو یا ناوبری.
• انواع:
  1. Sidebar ثابت (Fixed): همیشه در سمت چپ/راست صفحه باقی می‌ماند.
  2. Sidebar کشویی (Collapsible): با کلیک باز و بسته می‌شود.

• پیاده‌سازی با Flexbox:

   

  .container {
    display: flex;
  }
  .sidebar {
    width: 250px;
  }
  .content {
    flex: 1;
  }
  

• نسخه واکنش‌گرا (Responsive):
  • در موبایل، sidebar به بالای صفحه منتقل یا با دکمه‌ی منو (hamburger) نمایش داده می‌شود.
• نکته: با position: fixed; می‌توان sidebar را ثابت نگه داشت هنگام اسکرول.