تابز مدیا | آموزش قدم به قدم برنامه نویسی

CSS Grid Layout Module

📌 Grid یک سیستم دو‌بعدی (هم ردیف rows هم ستون columns) برای طراحی صفحات وبه.
در حالی که Flexbox بیشتر برای یک‌بعدی (فقط در راستای ردیف یا ستون) استفاده میشه.

🔹 شروع با Grid

برای ساخت Grid کافیه روی یک کانتینر خاص display: grid بزنی:


.container {
  display: grid;
}

🔹 تعریف ستون‌ها و ردیف‌ها

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


.container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* سه ستون 200px */
  grid-template-rows: 100px 100px;          /* دو ردیف 100px */
}

🔹 استفاده از fr (Fraction)

واحد fr یعنی یک بخش از فضای قابل تقسیم.


.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* ستون وسط دو برابر ستون‌های کناری */
}

🔹 فاصله‌ها

gap → فاصله بین ستون و ردیف
column-gap → فاصله بین ستون‌ها
row-gap → فاصله بین ردیف‌ها


.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

🔹 قرار دادن آیتم‌ها

هر آیتم می‌تونه بگه در کدوم ستون یا ردیف قرار بگیره:


.item1 {
  grid-column: 1 / 3; /* از ستون 1 تا 3 کشیده بشه */
  grid-row: 1 / 2;    /* در ردیف اول */
}

🔹 ترازبندی در Grid

justify-items → ترازبندی افقی همه آیتم‌ها
align-items → ترازبندی عمودی همه آیتم‌ها
place-items → ترکیب هر دو


.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 300px;
  justify-items: center; /* وسط افقی */
  align-items: center;   /* وسط عمودی */
}

🔹 ترازبندی کل Grid

justify-content → ترازبندی کل Grid افقی
align-content → ترازبندی کل Grid عمودی
place-content → ترکیب هر دو

🔹 مثال کامل


<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>CSS Grid Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-rows: 100px 100px;
      gap: 15px;
      height: 300px;
      background: lightblue;
      padding: 10px;
    }
    .item {
      background: coral;
      color: white;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .item1 {
      grid-column: 1 / 3; /* کشیده بشه روی دو ستون */
    }
    .item4 {
      grid-row: 2 / 3;
      grid-column: 2 / 4;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item item1">آیتم 1</div>
    <div class="item item2">آیتم 2</div>
    <div class="item item3">آیتم 3</div>
    <div class="item item4">آیتم 4</div>
  </div>
</body>
</html>

✨ خلاصه:

grid-template-columns و grid-template-rows → تعریف ستون و ردیف
gap → فاصله بین خانه‌ها
grid-column و grid-row → کنترل جای آیتم‌ها
fr → واحد تقسیم‌بندی انعطاف‌پذیر
Grid = طراحی دو‌بعدی / Flexbox = طراحی یک‌بعدی