خاصية وضع عمود Grid
آخر تحديث: 2026-09-13
grid-column خاصية وضع عمود Grid
grid-column هو اختصار لـ grid-column-start و grid-column-end. يضع عنصر الشبكة على الاتجاه الأفقي. ومن خلال تحديد أرقام خطوط الشبكة البداية والنهاية، تتحكم في عدد الأعمدة التي يمتد عليها العنصر. وهي خاصية أساسية لبناء تخطيطات شبكة مرنة.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
grid-column: <grid-line> [ / <grid-line> ]?;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<grid-line> / <grid-line> | القيمة | وضع عمود الشبكة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-column | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： تحدد الكلمة المفتاحية span عدد المسارات التي يغطيها: grid-column: span 2 يمتد على عمودين.
تلميح： تُرقَّم خطوط الشبكة بدءًا من 1، ويكون الخط 1 في أقصى اليسار. وتُعد الأرقام السالبة من اليمين، و -1 هو الخط الموجود في أقصى اليمين.
❓ الأسئلة الشائعة
Qما الفرق بين grid-column: 1 / 3 و 1 / span 2؟
Aفي معظم الحالات ينتجان نفس النتيجة: 1 / 3 يعني من الخط 1 إلى الخط 3، بينما span 2 يعني البدء من الخط 1 وتغطية مسارين. ويظهر الفرق quando يتغير هيكل الشبكة: فـ span يعد المسارات فيظل متينًا، بينما قد تتخلخل خط النهاية المكتوب ثابتًا quando تُضاف أعمدة. ففضّل span quando يكون عدد المسارات المراد تغطيتها معروفًا.
Qهل يمكن لعناصر الشبكة أن تتداخل؟
Aنعم. يمكن وضع عدة عناصر شبكة في نفس منطقة الشبكة وتتداخل، مع تحكم z-index في أي واحد يكون في الأعلى. وهذا هو أساس تخطيطات على نمط المجلات والوسوم المتراكمة وغيرها من التأثيرات الطبقية. وافتراضيًا لا يتداخل خوارزمية التموضع التلقائي العناصر قط؛ فلا يحدث التداخل إلا quando يُوضع عنصر واحد على الأقل صراحةً بنفس خطوط الشبكة، لذا تعامل معه كميزة مقصودة. ولكن التداخل يخفي المحتوى ويمنع النقرات، لذا تحقق من بقاء المحتوى قابلًا للوصول وتجنب التداخل العرضي في التخطيطات العادية.
Qكيف أقرأ grid-column: span 2 بقيمة واحدة فقط؟
Aمع قيمة واحدة، يفترض الخط غير المحدد القيمة auto ويجد خوارزمية التموضع التلقائي للمتصفح موضعًا للعنصر، الذي يمتد بعد ذلك على عدد المسارات المعطى. ويعني grid-column: span 2 “ضع في الموضع المتاح التالي وامتد على عمودين”، بينما يبدأ grid-column: 1 / span 2 صراحةً من الخط 1. وتظل صيغة span مستقرة quando تُعاد ترقيم خطوط الشبكة.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
وضع صف Grid
يضع عنصر شبكة عموديًا
اختصار منطقة Grid
اختصار يضع عنصرًا على الصفوف والأعمدة دفعة واحدة
