آموزش جامع Grid در Flexbox

🎯 اهداف یادگیری

• درک تفاوت‌های بین Flexbox و Grid
• یادگیری نحوه ترکیب Grid و Flexbox
• تسلط بر ایجاد چیدمان‌های پیچیده با Grid در Flexbox
• آشنایی با بهترین روش‌های استفاده از این تکنیک

📌 Grid در Flexbox چیست؟

ترکیب Grid و Flexbox به شما امکان می‌دهد از مزایای هر دو سیستم چیدمان استفاده کنید:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

مزایای ترکیب Grid و Flexbox:

• کنترل دو بعدی: Grid برای چیدمان کلی صفحه و Flexbox برای ترازبندی داخلی آیتم‌ها
• انعطاف‌پذیری: ترکیب قدرت هر دو سیستم برای چیدمان‌های پیچیده
• واکنش‌گرایی: سهولت در ایجاد طرح‌بندی‌های واکنش‌گرا

📌 چه زمانی از Grid در Flexbox استفاده کنیم؟

/* زمانی که نیاز به چیدمان دو بعدی دارید */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
/* و برای محتوای داخل هر محصول از Flexbox استفاده می‌کنیم */
.product-card {
  display: flex;
  flex-direction: column;
}

قوانین طلایی:

• برای لایه‌بندی اصلی از Grid استفاده کنید: ساختار کلی صفحه
• برای اجزای داخلی از Flexbox استفاده کنید: ترازبندی محتوا
• از تودرتو شدن بیش از حد بپرهیزید: عمق بیش از 3 سطح می‌تواند مشکل‌ساز شود

📌 تفاوت‌های کلیدی Grid و Flexbox

📌 مثال‌های کاربردی

۱. ساخت کارد محصول با Grid و Flexbox

.products-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}
.product-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

۲. ساخت داشبورد مدیریتی

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px 1fr;
  height: 100vh;
}
.widget {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

📌 تمرین عملی

با استفاده از Grid و Flexbox، ساختار زیر را پیاده‌سازی کنید:

<!-- ساختار HTML -->
<div class="dashboard">
  <header>هدر</header>
  <aside>نوار کناری</aside>
  <main>
    <div class="widget">ویجت 1</div>
    <div class="widget">ویجت 2</div>
  </main>
</div>

راهنمای تمرین:

1. از Grid برای ساختار کلی داشبورد استفاده کنید
2. برای ویجت‌ها از Flexbox استفاده کنید
3. نوار کناری را با عرض ثابت 250px طراحی کنید
4. هدر را در تمام عرض صفحه قرار دهید

📌 نکات پیشرفته

۱. استفاده از minmax برای واکنش‌گرایی

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

۲. ترتیب نمایش در Grid

.item {
  grid-column: 1 / span 2; /* دو ستون را اشغال می‌کند */
  grid-row: 2; /* در ردیف دوم قرار می‌گیرد */
  order: 1; /* ترتیب نمایش را تغییر می‌دهد */
}

۳.gap در Flexbox

.flex-container {
  display: flex;
  justify-content: space-between; /* توزیع فضای بین آیتم‌ها */
  align-items: center; /* تراز عمودی */
  gap: 20px; /* فاصله بین آیتم‌ها */
}

📌 قدم بعدی

در درس بعدی با انیمیشن‌های CSS و ایجاد انتقال‌های روان آشنا خواهیم شد!