CSS Grid Lines
وقتی از CSS Grid استفاده میکنیم، صفحه به خطوط عمودی (columns) و خطوط افقی (rows) تقسیم میشه.
هر عنصر گرید میتونه بین این خطوط قرار بگیره.
🔹 ۱. شمارهگذاری خطوط
خطوط گرید از ۱ شروع میشن (نه صفر).
-
خطوط عمودی → شماره ستونها
-
خطوط افقی → شماره ردیفها
مثال:
🔹 ۲. مشخص کردن موقعیت یک آیتم
📌 آیتم از ستون خط ۱ تا ۳ و از ردیف خط ۱ تا ۳ کشیده میشه.
🔹 ۳. نوشتن کوتاهتر (Shorthand)
🔹 ۴. استفاده از خط منفی
میتونیم از شماره منفی برای اشاره به خطها از انتهای گرید استفاده کنیم:
🔹 ۵. grid-area
میتونیم در یک خط هم start و end برای ستون و ردیف رو مشخص کنیم:
✅ نکته:
-
خطها اساس مکانیابی در گرید هستن.
-
grid-column
وgrid-row
پرکاربردترین ویژگیها برای کنترل موقعیت آیتمها هستن.