koyararri 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: 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