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

CSS Grid Columns, Rows and Gaps

🔹 1. ستون‌ها (Grid Columns)

ستون‌ها با خاصیت grid-template-columns تعریف می‌شن.
هر مقداری که بدی یعنی یک ستون.


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

🔸 روش‌های تعریف ستون‌ها:

مقدار ثابت (px, %, em):
grid-template-columns: 200px 200px;
مقدار انعطاف‌پذیر (fr):
grid-template-columns: 1fr 2fr 1fr;
تکرار (repeat):
grid-template-columns: repeat(3, 1fr);

🔹 2. ردیف‌ها (Grid Rows)

ردیف‌ها با grid-template-rows ساخته می‌شن.


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

🔸 ترکیب:


.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px 100px;
}

🔹 3. فاصله بین خانه‌ها (Grid Gaps)

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


.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
  gap: 20px;            /* فاصله بین همه خانه‌ها */
  column-gap: 30px;     /* فاصله ستون‌ها */
  row-gap: 10px;        /* فاصله ردیف‌ها */
}

🔹 4. مثال کامل


<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>Grid Columns Rows Gaps</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-rows: 100px 150px;
      gap: 15px;
      background: lightblue;
      padding: 10px;
    }
    .item {
      background: coral;
      color: white;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">آیتم 1</div>
    <div class="item">آیتم 2</div>
    <div class="item">آیتم 3</div>
    <div class="item">آیتم 4</div>
    <div class="item">آیتم 5</div>
    <div class="item">آیتم 6</div>
  </div>
</body>
</html>

✅ خلاصه:

ستون‌ها: grid-template-columns
ردیف‌ها: grid-template-rows
فاصله: gap, column-gap, row-gap