CSS گرید ایریا کلاس
- پچھلے پیج گرید
- پچھلے پیج grid-auto-columns
تعریف و استفاده
مخصوصیت 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 Grid Layout Module Level 1 |
| زبان جاوااسکریپت: | 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';
}
پشتیبانی مرورگر
تبلیغات میگوید که نسخه اولین مرورگر که این ویژگی را کامل پشتیبانی میکند.
| چروم | IE / ایج | فایرفاکس | سافری | اوپرا |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- پچھلے پیج گرید
- پچھلے پیج grid-auto-columns
