خاصیت grid-template در CSS - وب سایت PNLdev

نمونه کد

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

.grid-container {
    display: grid;
    grid-template: 150px / auto auto auto;
    grid-gap: 15px;
    background-color: #2196F3;
    padding: 15px;
}

آزمایشگاه

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

خاصیت grid-template یک ویژگی مختصر است برای:

grid-template-rows
grid-template-columns
grid-template-areas

اطلاعات

#	توضیحات
مقدار پیشفرض	پیش فرض پیش فرض پیش فرض
ارث بری	خیر
انیمیشن	بله
نسخه	CSS Grid Layout Module Level 1
نگارش JS	object.style.gridTemplate="250px / auto auto"

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

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

شیوه نگارش

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	این مقدار را به ویژگی پیش فرض خود اضافه می کند.
inherit	این مقدار را از تگ والد خود به ارث می برد.

خاصیت grid-template در CSS grid-template property CSS

نمونه کد

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

اطلاعات

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

شیوه نگارش

مقادیر

خاصیت grid-template در CSS
grid-template property CSS