برای اینکه یک المنت بتونه گرید داشته باشه، باید اون رو به Grid Container تبدیل کنیم.
یعنی ویژگی display: grid یا display: inline-grid رو بهش بدیم.

🔹 ۱. ساخت گرید کانتینر

.container {
  display: grid;
}

هر المنتی داخل .container باشه، تبدیل به Grid Item میشه.

🔹 ۲. تعیین ستون‌ها (grid-template-columns)

.container {
  display: grid;
  grid-template-columns: 100px 200px auto;
}

📌 کانتینر سه ستون داره: یکی 100px، یکی 200px و یکی باقیمانده فضا.

🔹 ۳. تعیین ردیف‌ها (grid-template-rows)

.container {
  display: grid;
  grid-template-rows: 150px 150px;
}

📌 دو ردیف با ارتفاع 150px ساخته میشه.

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

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

📌 ستون وسط دو برابر ستون‌های کناری فضا می‌گیره.

🔹 ۵. فاصله بین خانه‌ها (gap)

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

📌 فاصله‌ی 10px بین همه خانه‌های گرید.

🔹 ۶. ترکیب مثال کامل

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

📌 کانتینر با ۲ ستون و ۲ ردیف و فاصله ۱۵px.

✅ نکته:

• هر کانتینر گرید، فرزندان خودش رو به صورت Grid Items مدیریت می‌کنه.

• می‌تونیم با repeat() تعداد ستون/ردیف رو راحت‌تر مشخص کنیم.