وقتی از CSS Grid استفاده می‌کنیم، صفحه به خطوط عمودی (columns) و خطوط افقی (rows) تقسیم میشه.
هر عنصر گرید می‌تونه بین این خطوط قرار بگیره.

🔹 ۱. شماره‌گذاری خطوط
خطوط گرید از ۱ شروع میشن (نه صفر).

• خطوط عمودی → شماره ستون‌ها

• خطوط افقی → شماره ردیف‌ها

مثال:

Columns → |1   2   3   4|
Rows    → —1————2————3—

🔹 ۲. مشخص کردن موقعیت یک آیتم

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

📌 آیتم از ستون خط ۱ تا ۳ و از ردیف خط ۱ تا ۳ کشیده میشه.

🔹 ۳. نوشتن کوتاه‌تر (Shorthand)

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

🔹 ۴. استفاده از خط منفی

می‌تونیم از شماره منفی برای اشاره به خط‌ها از انتهای گرید استفاده کنیم:

.item2 {
  grid-column: 1 / -1; /* کشیده شدن از اولین خط تا آخرین خط */
}

🔹 ۵. grid-area

می‌تونیم در یک خط هم start و end برای ستون و ردیف رو مشخص کنیم:

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

✅ نکته:

• خط‌ها اساس مکان‌یابی در گرید هستن.

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