فصل پانزدهم: آشنایی با CSS Grid

مقدمه

تا اینجا با Flexbox یاد گرفتی چطور عناصر رو کنار هم یا زیر هم بچینی. حالا با CSS Grid آشنا می‌شی؛ ابزاری قوی‌تر برای ساخت چیدمان‌های جدولی، چندستونه، و حتی قالب‌بندی صفحه کامل.
Grid یعنی کنترل ریز و نقطه‌به‌نقطه روی ستون‌ها و ردیف‌ها—خیلی شبیه جدول اکسل!

---

۱. فعال‌سازی Grid

کافیه روی یک عنصر والد بذاری:

.container {
  display: grid;
}

---

۲. ساخت سطر و ستون

دو تا ویژگی اصلی داریم:

• grid-template-columns: تعیین تعداد و اندازه ستون‌ها
• grid-template-rows: تعیین تعداد و اندازه ردیف‌ها

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 200px;
}

• این یعنی سه ستون: یکی 200px و دوتای بعد مساوی (fr یعنی fraction، یعنی سهمی از فضا).
• و دوتا ردیف: اولی 80px، دومی 200px.

---

۳. قرار دادن آیتم‌ها در خانه‌های جدول

هر المنت فرزند به ترتیب خونه‌ها رو پر می‌کنه.
اما با ویژگی‌های زیر می‌تونی آیتم‌ها رو جابجا کنی:

.item1 {
  grid-column: 1 / 3; /* ستون اول تا سوم (دو ستون کنار هم) */
  grid-row: 1 / 2;
}

• یعنی آیتم یک، از اولین ستون تا قبل از سوم رو می‌گیره (پس دوتا ستون اشغال می‌کنه).

---

۴. فاصله‌گذاری و حاشیه بین خانه‌ها (Gap)

خالی کردن جا بین سطرها و ستون‌ها:

.container {
  gap: 16px;
  /* یا می‌تونی جدا جدا بدی: 
      column-gap: 20px;
      row-gap: 40px;
  */
}

---

۵. اندازه‌دهی خودکار و تطبیقی (Repeat, Auto-fill, Auto-fit)

خیلی راحت می‌تونی بگی: “هرچندتاست، ستون بساز”:

.container {
  grid-template-columns: repeat(3, 1fr); /* سه ستون مساوی */
}
/* حالت تطبیقی: */
.container {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

• مناسب لیست کارت یا گالری ریسپانسیو.

---

۶. تراز کردن آیتم‌ها (Align/Justify)

.container {
  justify-items: center; /* آیتم‌ها افقی وسط چین */
  align-items: center;   /* عمودی وسط چین */
}

---

۷. مثال کامل (یک صفحه ساده با Grid)

<div class="container">
  <header>Header</header>
  <nav>Menu</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 60px;
  gap: 10px;
  height: 400px;
}
header {
  grid-column: 1 / 3; /* از ستون ۱ تا قبل از ۳ یعنی کل عرض */
  background: #2196f3; color: white; text-align: center;
}
nav {
  grid-row: 2 / 3;
  background: #fbc02d;
}
main {
  grid-column: 2 / 3; grid-row: 2 / 3;
  background: #fff; border: 1px solid #eee;
}
aside {
  grid-column: 1 / 2; grid-row: 3 / 4;
  background: #388e3c; color: white;
}
footer {
  grid-column: 2 / 3; grid-row: 3 / 4;
  background: #6d4c41; color: white; text-align: center;
}

---

۸. تمرین‌های پیشنهادی

۱. یک گالری عکس با سه یا چهار ستون ریسپانسیو بساز (با auto-fit یا auto-fill).

2. یک جدول ساده با header، قسمت کناری و فوتر بساز (مثل مثال بالا اما با رنگ دلخواهت).
3. یک کارت محصول درست کن که عکس و توضیحات و قیمت رو با Grid مرتب کند.

---

نکته سریع:

CSS Grid و Flexbox مکمل هم هستند. معمولاً ساختار کلی با Grid و ریزچیدمان هر بخش با Flexbox خیلی جواب می‌دهد!