خصائص grid-column-end CSS
- الصفحة السابقة grid-column
- الصفحة التالية grid-column-gap
التعريف والاستخدام
يحدد عدد الأعمدة التي سيتم تمرير العنصر عبرها أو في أي خط عرضي (column-line) ينتهي العنصر.
يرجى الرجوع إلى الأمام في الصفحة للمثال.
يرجى الرجوع أيضًا إلى:
دليل CSS:تصميم شبكة CSS
مثال
مثال 1
لتجعل "item1" يغطي ثلاثة أعمدة:
.item1 {
grid-column-end: span 3;
}
مثال 2
يمكنك استخدام قيمة الخط العرضي بدلاً من عدد الأعمدة التي سيتم تمرير العنصر عبرها:
.item1 {
grid-column-end: 3;
}
جملة CSS
grid-column-end: auto|span n|column-line;
قيمة الخاصية
| القيمة | الوصف |
|---|---|
| auto | القيمة الافتراضية. سيتم تمرير العنصر عبر عمود واحد. |
| span n | يحدد عدد الأعمدة التي سيتم تمرير العنصر عبرها. |
| column-line | يحدد في أي عمود يتعطل عرض العنصر. |
تفاصيل التقنية
| القيمة الافتراضية: | auto |
|---|---|
| الوراثة: | لا |
| صنع المتحركة: | يدعم. يرجى الرجوع إلى:خصائص المتحركة. |
| الإصدار: | مستوى 1 لمodule CSS Grid Layout |
| جافا سكربت الجملة: | object.style.gridColumnEnd="5" |
دعم المتصفح
الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذه الخاصية بالكامل.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- الصفحة السابقة grid-column
- الصفحة التالية grid-column-gap
