نمونه کد

یک نمونه ساده از خاصیت grid-area:

آزمایشگاه

تعریف و کاربرد

برای تعیین اندازه و نوع یک آیتم در طرح بندی شبکه ای از خاصیت grid-area استفاده میکنیم که علاوه بر آن، خاصیت های:

grid-row-start
grid-column-start
grid-row-end
grid-column-end

نیز تحت پوشش آن می باشند.

اطلاعات

# توضیحات
مقدار پیشفرض خودکار / خودکار / خودکار / خودکار
ارث بری خیر
انیمیشن بله
نسخه CSS Grid Layout Module Level 1
نگارش JS object.style.gridArea="1 / 2 / span 2 / span 3"

سازگاری با مرورگر

# کروم ادج فایرفاکس سافاری اپرا
grid-area

شیوه نگارش

مقادیر

مقادیر توضیحات
grid-row-start تعیین می کند که نمایش آیتم در کدام ردیف شروع شود.
grid-column-start تعیین می کند که نمایش آیتم در کدام ستون شروع شود.
grid-row-end تعیین می کند که نمایش آیتم در کدام ردیف تمام شود.
grid-column-end تعیین می کند که نمایش آیتم در کدام ستون تمام شود.
itemname یک نام برای آیتم grid مشخص می کند.