ویژگی grid-area CSS

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

ویژگی grid-area اندازه پروژه‌های شبکه و موقعیت آن در طرح شبکه، کوتاه‌نویسی از این ویژگی‌ها است:

ویژگی grid-area همچنین می‌تواند برای نام‌گذاری پروژه‌های شبکه استفاده شود. سپس می‌توان از طریق حاوی شبکه، grid-template-areas ویژگی‌های منابع نام‌گذاری شده برای پروژه‌های شبکه. لطفاً به مثال زیر مراجعه کنید.

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

تدریس CSS:طرح شبکه CSS

مثال

مثال 1

برای اینکه "item1" از ردیف 2 ستون 1 شروع شود و دو ردیف و سه ستون را پوشش دهد:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
{}

آزمایش کنید

توضیح:مثال‌های بیشتری در پایین صفحه موجود است.

زبان CSS

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

مقدار ویژگی

مقدار توضیح
grid-row-start تعریف از کدام ردیف نمایش داده شود.
grid-column-start تعریف از کدام ستون نمایش داده شود.
grid-row-end تعیین در کدام خط ردیفی پروژه نمایش داده نمی‌شود، یا چند ردیف را پوشش می‌دهد.
grid-column-end تعیین در کدام خط ستونی پروژه نمایش داده نمی‌شود، یا چند ستون را پوشش می‌دهد.
itemname تعیین پروژه‌های شبکه.

جزئیات فنی

مقدار پیش‌فرض: auto / auto / auto / auto
وراثت: خیر
انیمیشن‌سازی: پشتیبانی می‌شود. لطفاً ببینید:ویژگی‌های مرتبط با انیمیشن.
نسخه: مدول چیدمان شبکه CSS Level 1
جمله‌بندی JavaScript: object.style.gridArea="1 / 2 / span 2 / span 3"

مثال‌های بیشتر

مثال 2

Item1 با نام 'myArea' در یک شبکه پنج ستونی همه پنج ستون را پوشش می‌دهد:

.item1 {
  grid-area: myArea;
{}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
{}

آزمایش کنید

مثال 3

بگذارید 'myArea' در یک شبکه پنج ستونی دو ستون را پوشش دهد (نقطه‌چین نشان‌دهنده پروژه‌ای بدون نام است):

.item1 {
  grid-area: myArea;
{}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
{}

آزمایش کنید

مثال 4

بگذارید 'item1' دو ستون و دو ردیف را پوشش دهد:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
{}

آزمایش کنید

مثال 5

همه پروژه‌ها را نام‌گذاری کنید و یک قالب وب آماده ایجاد کنید:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
{}

آزمایش کنید

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

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

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