CSS گرید-تیمپلیت-ارئاس اپریشن
- پچھلے صفحہ grid-template
- آئندہ صفحہ grid-template-columns
تعریف و استفاده
پروپرتی grid-template-areas برای تعیین مناطق در قالب شبکه استفاده کنید.
شما میتوانید از grid-area پروپرتی نیم ناو نام گزاری پروژه، سپس نام را در پروپرتی grid-template-areas اشاره نمائید.
هر منطقه توسط علامت撇 تعریف میشود. برای نامگذاری پروژههای شبکه بدون نام از نقطه استفاده کنید.
لطفاً ببینید:
آموزش CSS:CSS گرید پروجیکٹ
کتابخانه CSS:ویژگی grid-area
کتابخانه CSS:ویژگی grid-template
مثال
مثال 1
برای نامگذاری پروژه "myArea" در یک شبکه پنج ستونی دو ستون را پوشش میدهد:
.item1 { grid-area: myArea; } .grid-container { display: grid; grid-template-areas: "myArea myArea . . ."; }
مثال 2
دو ردیف تعیین میکند، جایی که "item1" در دو ردیف اول دو ستون اول را در یک شبکه پنج ستونی پوشش میدهد:
.item1 { grid-area: myArea; } .grid-container { display: grid; grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .'; }
مثال 3
تمام پروژهها را نامگذاری کنید و یک قالب وب پیشساخته ایجاد کنید:
.item1 { grid-area: header; } .item2 { grid-area: menu; } .item3 { grid-area: main; } .item4 { grid-area: right; } .item5 { grid-area: footer; } .grid-container { display: grid; grid-template-areas: 'header header header header header' 'menu main main main right right' 'menu footer footer footer footer'; }
نوشتار CSS
grid-template-areas: none|itemnames;
مقدار ویژگی
مقدار | توضیحات |
---|---|
none | مقدار پیشفرض. مناطق شبکه (grid areas) بدون نام. |
itemnames | سریالی را تعیین میکند که هر ستون و هر ردیف چگونه نمایش داده شوند. |
جزئیات فنی
مقدار پیشفرض: | none |
---|---|
وراثت: | خیر |
انیمیشنسازی: | پشتیبانی میشود. لطفاً ببینید:ویژگیهای مرتبط با انیمیشن. |
نسخه: | مستند CSS Grid Layout Module Level 1 |
نوشتار JavaScript: | object.style.gridTemplateAreas=". . . myArea myArea" |
پشتیبانی مرورگر
تبلیغات میگویند که نسخه اولین مرورگر که این ویژگی را کاملاً پشتیبانی میکند.
چروم | IE / ایج | فائرفاکس | سافری | اوپرا |
---|---|---|---|---|
57 | 16 | 52 | 10 | 44 |
- پچھلے صفحہ grid-template
- آئندہ صفحہ grid-template-columns