هر المنتی که داخل یک Grid Container قرار بگیره، به صورت خودکار تبدیل به Grid Item میشه.
با استفاده از ویژگی‌های مختلف می‌تونیم محل و اندازه آیتم‌ها رو کنترل کنیم.

🔹 ۱. قرارگیری پیش‌فرض
به صورت پیش‌فرض آیتم‌ها یکی‌یکی داخل سلول‌های گرید چیده میشن:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

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

🔹 ۲. مشخص کردن محل آیتم (با خطوط گرید)

.item1 {
  grid-column: 1 / 3;  /* از خط ستون 1 تا 3 */
  grid-row: 1 / 2;     /* از خط ردیف 1 تا 2 */
}

📌 آیتم ۱ روی دو ستون کشیده میشه.

🔹 ۳. شورتکات (grid-area)

.item2 {
  grid-area: 2 / 1 / 3 / 3;
  /* row-start / column-start / row-end / column-end */
}

📌 آیتم ۲ دقیقا موقعیتش رو با چهار عدد مشخص می‌کنه.

🔹 ۴. کنترل تراز آیتم‌ها

• justify-self → تراز افقی آیتم

• align-self → تراز عمودی آیتم

• place-self → ترکیب هر دو

.item3 {
  justify-self: center; /* وسط‌چین افقی */
  align-self: end;      /* پایین‌چین عمودی */
}

🔹 ۵. اندازه آیتم‌ها

آیتم‌ها می‌تونن خودشون رو کش بدن یا اندازه مشخص داشته باشن:

.item4 {
  grid-column: 1 / span 2;  /* دو ستون اشغال کن */
}

✅ نکته:

• هر آیتم می‌تونه به تنهایی اندازه و جای خودش رو کنترل کنه.

• grid-column و grid-row پرکاربردترین ویژگی‌ها برای موقعیت‌دهی هستن.