CSS گرید کولمن پرزیر属性
- پچھلے پیج grid-auto-rows
- پچھلے پیج grid-column-end
تعریف و استفاده
ویژگی grid-column تعیین میکند اندازه پروژههای شبکه و موقعیت آنها در طرح شبکه و یک کوتاهنویسی از ویژگیهای زیر است:
لطفاً به اینجا نیز نگاه کنید:
آموزش CSS:طرح شبکه CSS
مثال
مثال 1
برای اینکه "item1" از ستون 1 شروع شده و دو ستون را پوشش دهد:
.item1 {
grid-column: 1 / span 2;
}
مثال 2
میتوانید از مقادیر خط ستون به جای تعداد ستونهایی که میخواهید پوشش دهید، استفاده کنید:
.item1 {
grid-column: 1 / 3;
}
قواعد CSS
grid-column: grid-column-start / grid-column-end;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| grid-column-start | تعیین میکند که پروژهها از کدام ستون آغاز شوند. |
| grid-column-end | تعیین میکند که پروژهها در کدام خط ستون (column-line) متوقف شوند یا چند ستون را پوشش دهند. |
جزئیات فنی
| مقدار پیشفرض: | auto / auto |
|---|---|
| وراثت: | خیر |
| انیمیشن: | پشتیبانی میشود. لطفاً ببینید:ویژگیهای مرتبط با انیمیشن. |
| نسخه: | مستند CSS Grid Layout Module Level 1 |
| قواعد جاوااسکریپت: | object.style.gridColumn="2 / span 2" |
پشتیبانی مرورگر
تبلیغات میگوید که نسخه اولین مرورگر که این ویژگی را کامل پشتیبانی میکند.
| چروم | IE / ایج | فائرفاکس | سافری | اوپرا |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- پچھلے پیج grid-auto-rows
- پچھلے پیج grid-column-end
