ایجاد شده در ۰۲ آبان ۱۴۰۴
خلاصه جلسه: مفاهیم اصلی CSS Grid
۱. CSS Grid چیست؟
- سیستم چیدمان دو‌بعدی برای کنترل ستون و ردیف
۲. Column (ستون)
- چیدمان عمودی
- تعریف با:
grid-template-columns - مقداردهی: px – % – fr
مثال:
grid-template-columns: 1fr 2fr 1fr;
۳. Row (ردیف)
- چیدمان افقی
- تعریف با:
grid-template-rows مثال:
grid-template-rows: 150px auto;
۴. Gap (فاصله بین خانه‌ها)
- فاصله بین ستون و ردیف بدون نیاز به margin
- دستورات: gap – row-gap – column-gap
مثال:
gap: 10px;
۵. Grid Line (خط شبکه)
- خطوط مرزی بین ستون‌ها و ردیف‌ها
- شماره‌گذاری برای موقعیت‌دهی دقیق
مثال:
grid-column: 1 / 3;
۶. Track (نوار یا مسیر)
- فاصله بین دو Grid Line
- همان ستون یا ردیف محسوب می‌شود
۷. فرمول تعداد Grid Line
- تعداد ستون‌ها + ۱
- تعداد ردیف‌ها + ۱