این آموزش در تاریخ ۱۴۰۰/۱۱/۰۴ آپدیت شده است.
آموزش ویژگی grid-area در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی grid-area در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی grid-area در CSS
با استفاده از ویژگی grid-area در CSS میتوان هم یک نام دلخواه برای یک یا چندین آیتم مشخص کرد ( نمونه در مثال شماره ۲ ) و هم بطور کلی میتوان ویژگی های زیر را بصورت خلاصه نوشت :
- grid-row-start | سطر شروع آیتم
- grid-column-start | ستون شروع آیتم
- grid-row-end | سطر پایان دهنده آیتم
- grid-column-end | ستون پایان دهنده آیتم
برای اینکه بهتر متوجه شوید ، لاین یا خط یا نقطه شروع و پایان یک آیتم به چه شکل می باشد لطفا به تصویر زیر توجه نمایید :
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی grid-area را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : آیتم شماره ۱ از سطر دوم ( ۲ ) و ستون دوم ( ۲ ) شروع میشود، و ۲ تا از سطرها و ۲ تا از ستون هارو باخودش ادغام میکنه
|
1 2 3 4 |
.Item1{ grid-area: 2 / 2 / span 2 / span 2; background-color: yellow !important; } |
مثال شماره ۲ : تعریف یک نام دلخواه برای grid-area و وصل کردنش به grid-template-areas
|
1 2 3 4 5 6 7 8 9 10 11 |
.My-Container{ grid-template-areas: 'MyItem1 MyItem1 MyItem2 MyItem2'; } .Item1{ grid-area: MyItem1; } .Item2{ grid-area: MyItem2; } |
Free-Learn
جدول مشخصات ویژگی grid-area در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | auto / auto / auto / auto |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS Grid Layout Module Level 3 |
| نحوه استفاده در جاوااسکریپت | object.style.gridArea=”2 / 1 / span 2 / span 5″; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی grid-area در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| 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
نکات و توضیحات
- نکته یا توضیح خاصی وجود ندارد.
