ایجاد شده در ۰۲ آبان ۱۴۰۴
خلاصه جلسه: بخش‌بندی المان‌ها در CSS Grid (بخش دوم)
۱. مفهوم span
- برای مشخص کردن تعداد ستون‌ها یا ردیف‌هایی که یک آیتم اشغال می‌کند
- استفاده در grid-column یا grid-row
مثال کاربردی:
grid-column: 1 / span 3; /* از ستون 1 شروع و 3 ستون اشغال می‌کند */ grid-row: 3 / span 2; /* از ردیف 3 شروع و 2 ردیف اشغال می‌کند */
۲. پراپرتی grid-area
- ترکیب start-row / start-column / end-row / end-column
- می‌تواند به صورت span هم استفاده شود
مثال کاربردی:
grid-area: 1 / 1 / span 2 / span 3; grid-area: 5 / 1 / 7 / 5;
۳. نکات مهم
- span جایگزین ساده برای نوشتن start و end در ستون یا ردیف است
- grid-area راهی کوتاه و جامع برای تعیین محدوده آیتم‌ها روی شبکه
- ترکیب این دو باعث می‌شود بخش‌بندی‌ها سریع و خوانا باشد