ویژگی CSS grid-template

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

ویژگی grid-template یک شورت برای ویژگی‌های زیر است:

لطفاً به اینجا نیز مراجعه کنید:

آموزش CSS:پروژه‌های شبکه CSS

دستورالعمل CSS:ویژگی grid-area

دستورالعمل CSS:ویژگی grid-template-rows

دستورالعمل CSS:ویژگی grid-template-columns

دستورالعمل CSS:ویژگی grid-template-areas

مثال

مثال 1

ایجاد یک قالب سه ستون با ارتفاع 150 پیکسل برای اولین ستون:

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

آزمایش کنید

مثال 2

دو ردیف مشخص می‌کند، جایی که "item1" در دو ردیف اول دو ستون اول (در یک چیدمان شبکه پنج ستونی) قرار دارد:

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template:
    '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:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

آزمایش کنید

آموزش زبان CSS

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
مقدار ویژگی
مقدار توضیحات
none مقدار پیش‌فرض. اندازه ستون‌ها و ردیف‌ها را مشخص نمی‌کند.
grid-template-rows / grid-template-columns محدد اندازه ستون‌ها و ردیف‌ها.
grid-template-areas محدد استفاده از چیدمان شبکه‌ای با نام‌گذاری پروژه.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. ببینید: initial.
inherit این ویژگی را از عنصر پدر خود به ارث می‌برد. ببینید: inherit.

جزئیات فنی

مقدار پیش‌فرض: none none none
انتقال: خیر
انیمیشن: پشتیبانی می‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه: مодуل چیدمان شبکه CSS Grid Level 1
آموزش زبان جاوااسکریپت: object.style.gridTemplate="250px / auto auto"

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این ویژگی هستند.

کروم IE / Edge افراد سفاری اوپرا
57 16 52 10 44