خصائص العمود الشبكي

التعريف والاستخدام

يحدد خاصية 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
الوراثة: لا
صنع الرسوم المتحركة: يدعم. يرجى الرجوع إلى:خصائص الرسوم المتحركة.
الإصدار: مستوى 1 لمodule CSS Grid Layout
جافا سكربت الصيغة: object.style.gridColumn="2 / span 2"

دعم المتصفح

الرقم في الجدول يشير إلى إصدار المتصفح الأوائل الذي يدعم هذه الخاصية.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44