آموزش ویژگی grid-area در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی grid-area در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی grid-area در CSS
با استفاده از ویژگی grid-area در CSS میتوان هم یک نام را برای آیتم مشخص کرد ( نمونه در مثال شماره ۲ ) و هم بطور کلی میتوان ویژگی های زیر را که همگی مربوط به آیتم های یک گرید یا Grid می باشند، بصورت خلاصه نوشت :
- grid-row-start | سطر شروع آیتم
- grid-column-start | ستون شروع آیتم
- grid-row-end | سطر پایان دهنده آیتم
- grid-column-end | ستون پایان دهنده آیتم
برای اینکه بهتر متوجه شوید ، لاین یا خط یا نقطه شروع و پایان یک آیتم به چه شکل می باشد لطفا به تصویر زیر توجه نمایید :
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی grid-area را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : آیتم شماره ۱ از سطر دوم ( ۲ ) و ستون اول ( ۱ ) شروع میشود، و ۲ تا از سطرها و ۳ تا از ستون هارو باخودش ادغام میکنه.
|
1 2 3 |
.item-1 { grid-area: 2 / 1 / span 2 / span 3; } |
مثال شماره ۲ : تعریف یک نام دلخواه برای ناحیه یا Area ، و اتصال آن به ویژگی grid-template-areas
|
1 2 3 4 5 6 7 8 |
.My-Container { display: grid; grid-template-areas: 'free-learn free-learn free-learn free-learn free-learn'; } .item-1 { grid-area: free-learn; } |
Free-Learn
جدول مشخصات ویژگی grid-area در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | auto / auto / auto / auto |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS Grid Layout Module Level 1 |
| نحوه استفاده در جاوااسکریپت | object.style.gridArea=”2 / 1 / span 2 / span 5″; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی grid-area در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| grid-area | ۵۷ | ۵۲ | ۴۴ | ۱۰ | خیر |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | Item_Name; |
Free-Learn
جدول مقادیر ویژگی grid-area در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| grid-row-start | مشخص میکند که آیتم در چه سطری شروع شود |
| grid-column-start | مشخص میکند که آیتم در چه ستونی شروع شود |
| grid-row-end | خط سطر پایان دهنده نمایش آیتم را مشخص میکند یا با Span برای ادغام کردن سطرها |
| grid-column-end | خط ستون پایان دهنده نمایش آیتم را مشخص میکند یا با Span برای ادغام کردن ستون ها |
| Item_Name | مشخص کردن یک نام برای آیتم گرید ( نمونه در مثال شماره ۲ ) |
Free-Learn
نکات و توضیحات
این ویژگی در مرورگر اینترنت اکسپلورر یا IE پشتیبانی نمیشود.
با استفاده از این ویژگی علاوه بر خلاصه نویسی ویژگی های معرفی شده، نیز میتوان از آن برای مشخص کردن یک نام برای آیتم که باید این نام به ویژگی grid-template-areas متصل شود، استفاده کرد.
