آموزش ویژگی grid-area در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی 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 | ستون پایان دهنده آیتم

برای اینکه بهتر متوجه شوید ، لاین یا خط یا نقطه شروع و پایان یک آیتم به چه شکل می باشد لطفا به تصویر زیر توجه نمایید :

آموزش ویژگی grid-area در CSS

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی grid-area را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : آیتم شماره ۱ از سطر دوم ( ۲ ) و ستون اول ( ۱ ) شروع میشود، و ۲ تا از سطرها و ۳ تا از ستون هارو باخودش ادغام میکنه.

امتحان کنید

مثال شماره ۲ : تعریف یک نام دلخواه برای ناحیه یا Area ، و اتصال آن به ویژگی grid-template-areas

امتحان کنید

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 بصورت زیر می باشد.

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 متصل شود، استفاده کرد.

Free-Learn

فروشگاه فری لرن
دریافت PDF یا پرینت این مطلب