🔹 ششم - لایه‌بندی ستون‌های نابرابر (Unequal Column Layout)

• ایجاد چند ستون با عرض‌های متفاوت در یک سطر.
• استفاده از flexbox برای کنترل نسبت ستون‌ها.

• تعیین اندازه هر ستون با مقادیر متفاوت flex مثل:

   

  .col1 { flex: 1; }
  .col2 { flex: 2; }
  .col3 { flex: 3; }
  

• استفاده از gap برای فاصله بین ستون‌ها.
• کاربرد این نوع لایه‌بندی در بخش‌های محتوایی مثل بلاگ‌ها یا صفحات معرفی محصول.

🔹 هفتم - لایه‌بندی کاشی‌کاری (Tile Column Layout)

• ساخت ساختار کاشی‌گونه برای نمایش چندین بخش محتوا.

• استفاده از CSS Grid برای ایجاد شبکه منظم از باکس‌ها:

   

  .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
  }
  

• کنترل اندازه و فاصله کاشی‌ها برای واکنش‌گرایی (responsive design).
• کاربرد: گالری تصاویر، کارت‌های محصولات یا نمونه‌کارها.

🔹 هشتم - لایه‌بندی زیگ‌زاگ (Zig Zag Layout)

• طراحی بخشی که هر ردیف آن به‌صورت چپ‌راست متناوب نمایش داده می‌شود (مثل درباره ما یا بخش ویژگی‌ها).
• استفاده از flex-direction: row-reverse برای جابجایی ترتیب در ردیف‌های زوج.

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

   

  <div class="row even">...</div>
  <div class="row odd">...</div>
  

• در CSS کنترل موقعیت تصویر و متن برای حالت‌های مختلف.
• استفاده از Media Query برای واکنش‌گرایی در موبایل (تبدیل به حالت ستونی).

🔹 نهم - لایه‌بندی ترکیبی (Mix Layout)

• ترکیب چند نوع لایه‌بندی در یک صفحه (مثلاً header با layout ستونی، main با grid، footer با flex).
• شناخت مزایا و معایب ترکیب Layoutها.
• استفاده هم‌زمان از Flexbox و Grid برای طراحی بخش‌های مختلف:
  • Grid برای ساختار کلی
  • Flex برای جزئیات داخلی

• مثال:

   

  .main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
  .sidebar, .content {
    display: flex;
    flex-direction: column;
  }
  

• نکته مهم: رعایت هماهنگی در فاصله‌ها، تراز و واکنش‌گرایی بین بخش‌های مختلف.