CSS گریڈ پرپرٹی

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

ویژگی گرید یک شorthand از ویژگی‌های زیر است:

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

آموزش CSS:CSS قالب شبکه

مثال

مثال 1

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

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

آزمایش کنید

مثال 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;

مقدار ویژگی

مقدار توضیح
none مقدار پیش‌فرض. اندازه سطرها یا ستون‌ها را تعریف نمی‌کند.
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.

جزئیات فنی

مقدار پیش‌فرض: none none none auto auto row
ارث: خیر
انیمیشن: بله، به ویژگی‌های فردی نگاه کنید. لطفاً به: مراجعه کنیدویژگی‌های مرتبط با انیمیشن.
نسخه: CSS Grid Layout Module Level 1
نوشتار زبان جاوااسکریپت: object.style.grid="250px / auto auto auto"

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

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

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44

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

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

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

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

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

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

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

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

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