ویژگی grid CSS

صف قبل gap
صفحه بعدی grid-area

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

خصوصیت گرید یک کوتاه‌نویسی از خصوصیات زیر است:

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

مثال

مثال 1

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

.grid-container {
  نمایش: گرید;
  گرید: 150px / خودکار خودکار خودکار;
}

آزمایش کنید

مثال 2

دو سطر تعیین کنید، که "item1" در دو اولین سطر دو اولین ستون را پوشش می‌دهد (از قرار گرفتن پنج ستونی استفاده می‌شود):

.item1 {
  grid-area: myArea;
}
.grid-container {
  نمایش: گرید;
  گرید:
    '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 {
  نمایش: گرید;
  گرید:
    header header header header header
    'menu main main main right right'
    'menu footer footer footer footer';
}

آزمایش کنید

نحوه استفاده از CSS

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

مقدار خصوصیت

مقدار	توضیح
بدون	مقدار پیش‌فرض. اندازه ردیف‌ها و ستون‌ها را تعریف نمی‌کند.
grid-template-rows / grid-template-columns	اندازه ستون‌ها و ردیف‌ها را مشخص می‌کند.
grid-template-areas	چیدمان شبکه با استفاده از نام‌گذاری موارد را مشخص می‌کند.
grid-template-rows / grid-auto-columns	اندازه ردیف‌ها (ارتفاع) و اندازه خودکار ستون‌ها را مشخص می‌کند.
grid-auto-rows / grid-template-columns	اندازه خودکار ردیف‌ها را مشخص می‌کند و خصوصیت grid-template-columns را تنظیم می‌کند.
grid-template-rows / grid-auto-flow grid-auto-columns	اندازه ردیف‌ها (ارتفاع) را مشخص می‌کند و روش قرارگیری موارد خودکار و اندازه خودکار ستون‌ها را تعیین می‌کند.
grid-auto-flow grid-auto-rows / grid-template-columns	روشی که موارد خودکار قرار می‌گیرند، اندازه خودکار ردیف‌ها و تنظیم خصوصیت grid-template-columns را مشخص می‌کند.
initial	این خصوصیت را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به: مراجعه کنید initial.
inherit	این خصوصیت را از عنصر والد خود ارث می‌برد. لطفاً به: مراجعه کنید inherit.

جزئیات فنی

مقدار پیش‌فرض:	بدون، بدون، بدون، خودکار، خودکار، ردیف
ارث:	خیر
انیمیشن‌سازی:	بله، به خصوصیات فردی مراجعه کنید. لطفاً به: مراجعه کنیدخصوصیات مربوط به انیمیشن.
نسخه:	مодуل چیدمان شبکه CSS Grid Layout Level 1
نحوه استفاده از جاوااسکریپت:	object.style.grid="250px / auto auto auto"