گرید (Grid) یکی از قدرتمندترین ابزارهای CSS برای طراحی چیدمان‌های منظم و واکنش‌گراست. برخلاف روش‌های قدیمی مثل float یا حتی Flexbox، CSS Grid به‌طور مستقیم برای ساخت شبکه‌های چندستونه و چندردیفی طراحی شده و کنترل کامل روی ساختار صفحه به شما می‌دهد.

---

🟡 گرید چیست و چرا مهم است؟

• گرید یعنی تقسیم صفحه به ستون‌ها و ردیف‌های منظم.
• باعث می‌شود طراحی شما یکپارچه، بالانس و چشم‌نواز باشد.
• گرید ۱۲ ستونه محبوب است چون به‌راحتی به 2، 3، 4، 6 تقسیم می‌شود.

---

🧱 شروع با CSS Grid

ساختار HTML ساده:

<div class="container">
  <header>هدر</header>
  <aside>سایدبار</aside>
  <main>
    <div class="box">باکس 1</div>
    <div class="box">باکس 2</div>
    <div class="box">باکس 3</div>
    <div class="box">باکس 4</div>
  </main>
  <footer>فوتر</footer>
</div>

استایل پایه با Grid:

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* گرید ۱۲ ستونه */
  grid-gap: 20px; /* فاصله بین ستون‌ها (گاتر) */
}

header {
  grid-column: 1 / 13; /* هدر تمام‌عرض */
}

aside {
  grid-column: 10 / 13; /* سایدبار ۳ ستون سمت راست */
}

main {
  grid-column: 1 / 10; /* محتوای اصلی ۹ ستون سمت چپ */
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* چهار ستون داخلی */
  grid-gap: 20px;
}

footer {
  grid-column: 1 / 13; /* فوتر تمام‌عرض */
}

---

📱 واکنش‌گرایی با Media Queries

موبایل (≤480px):

@media screen and (max-width: 480px) {
  .container {
    grid-template-columns: 1fr; /* تک‌ستونه */
  }
  aside {
    grid-column: 1; /* سایدبار زیر محتوای اصلی */
  }
  main {
    grid-template-columns: 1fr; /* باکس‌ها یکی‌یکی زیر هم */
  }
}

تبلت (≤768px):

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: repeat(6, 1fr); /* گرید ۶ ستونه */
  }
  aside {
    grid-column: 1 / 7; /* سایدبار زیر محتوای اصلی */
  }
  main {
    grid-template-columns: repeat(2, 1fr); /* باکس‌ها دو‌تایی کنار هم */
  }
}

دسکتاپ متوسط (≤1200px):

@media screen and (max-width: 1200px) {
  .container {
    grid-template-columns: repeat(12, 1fr);
  }
  aside {
    grid-column: 9 / 13; /* سایدبار کنار محتوای اصلی */
  }
  main {
    grid-template-columns: repeat(2, 1fr); /* باکس‌ها دو‌تایی */
  }
}

دسکتاپ بزرگ (>1200px):

@media screen and (min-width: 1200px) {
  main {
    grid-template-columns: repeat(4, 1fr); /* باکس‌ها چهارتایی */
  }
}

---

🎯 جمع‌بندی

• با CSS Grid می‌توانید شبکه‌های چندستونه بسازید.
• با Media Queries چیدمان را برای موبایل، تبلت، لپ‌تاپ و دسکتاپ تغییر دهید.
• گرید ۱۲ ستونه انعطاف‌پذیر است و به‌راحتی تقسیم می‌شود.
• این روش مدرن‌تر و قدرتمندتر از float و حتی Flexbox برای ساخت شبکه‌های پیچیده است.

---

💡 تمرین پیشنهادی:
یک صفحه‌ی ساده با هدر، سایدبار، محتوای اصلی و فوتر بسازید. سپس با CSS Grid و Media Queries آن را واکنش‌گرا کنید تا در موبایل تک‌ستونه، در تبلت دو‌ستونه و در دسکتاپ چندستونه نمایش داده شود.