خاصية عمود شبكة CSS
مثال
اجعل "item1" يبدأ في العمود 1 ويمتد إلى عمودين:
.item1 {
grid-column: 1 / span 2;
}
التعريف والاستخدام
تحدد الخاصية حجم grid-column
عنصر الشبكة وموقعه في تخطيط الشبكة ، وهي خاصية اختصار للخصائص التالية:
القيمة الافتراضية: | سيارة سيارة |
---|---|
وارث: | رقم |
متحرك: | نعم. اقرأ عن animatable |
الإصدار: | وحدة تخطيط شبكة CSS المستوى 1 |
بناء جملة JavaScript: | الكائن .style.gridColumn = "2 / سبان 2" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
Property | |||||
---|---|---|---|---|---|
grid-column | 57 | 16 | 52 | 10 | 44 |
بنية CSS
grid-column: grid-column-start /
grid-column-end;
قيم الملكية
Value | Description |
---|---|
grid-column-start | Specifies on which column to start displaying the item. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
مزيد من الأمثلة
مثال
يمكنك استخدام قيم سطر الأعمدة بدلاً من عدد الأعمدة لتمتد:
.item1 {
grid-column: 1 / 3;
}
الصفحات ذات الصلة
دروس CSS: تخطيط شبكة CSS