ویژگی grid-column 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" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این ویژگی را کاملاً پشتیبانی می‌کنند.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- صفحه قبلی grid-auto-rows
- صفحه بعدی grid-column-end
