CSS گرید-تیمپلیت-ارئاس اپریشن

تعریف و استفاده

پروپرتی 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