CSS Grid Lines

وقتی از 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 پرکاربردترین ویژگی‌ها برای کنترل موقعیت آیتم‌ها هستن.