ویژگی grid-column-end CSS
- صفحه قبلی grid-column
- صفحه بعدی grid-column-gap
تعریف و استفاده
ویژگی grid-column-end تعیین می‌کند که پروژه چند ستون را خواهد پوشاند یا در کدام خط ستون (column-line) پایان می‌یابد.
مثال‌های پایین صفحه مراجعه کنید.
لطفاً به:
آموزش CSS:طرح شبکه CSS
مثال
مثال 1
برای اینکه "item1" سه ستون را پوشاند:
.item1 {
grid-column-end: span 3;
}
مثال 2
می‌توانید از مقادیر خط ستون به جای تعداد ستون‌هایی که پروژه باید پوشاند، استفاده کنید:
.item1 {
grid-column-end: 3;
}
نحوه استفاده از CSS
grid-column-end: خودکار|span n|column-line;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| خودکار | مقدار پیش‌فرض. پروژه یک ستون را خواهد پوشاند. |
| span n | تعیین می‌کند که پروژه چند ستون را خواهد پوشاند. |
| column-line | تعیین می‌کند که پروژه در کدام ستون نمایش داده شود. |
جزئیات فنی
| مقدار پیش‌فرض: | خودکار |
|---|---|
| وراثت: | خیر |
| انیمیشن‌سازی: | پشتیبانی می‌شود. لطفاً به:ویژگی‌های مربوط به انیمیشن. |
| نسخه: | مستند CSS Grid Layout Module Level 1 |
| نحوه استفاده از جاوااسکریپت: | object.style.gridColumnEnd="5" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهای پشتیبان از این ویژگی هستند.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- صفحه قبلی grid-column
- صفحه بعدی grid-column-gap
