خاصية column-span
آخر تحديث: 2026-09-13
column-span خاصية column-span
تحدد خاصية column-span ما إذا كان العنصر يمتد عبر عدة أعمدة. عند تعيينها إلى all، يمتد العنصر عبر كل الأعمدة؛ وتُستخدم عادةً للعناوين أو العناوين الفرعية في تخطيط متعدد الأعمدة لتمييزها بصريًا عن المحتوى المقسّم إلى أعمدة.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
column-span: none | all;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | all | كلمة مفتاحية | ما إذا كان العنصر يمتد عبر الأعمدة. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| column-span | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يتناغم column-span:all جيدًا مع العناوين في التخطيطات متعددة الأعمدة، مما يسمح للعنوان بالامتداد عبر جميع الأعمدة لهيكل مقال أوضح.
تحذير： تؤثر column-span فقط على العنصر نفسه؛ ولا تغير توزيع الأعمدة لعناصر أخرى. كان الدعم محدودًا في الإصدارات الأقدم من Firefox، لذا تحقق من التوافق.
❓ الأسئلة الشائعة
Qهل يمكن لـ column-span المد عبر عدد محدد من الأعمدة؟
Aلا. لا يملك column-span سوى قيمتين، none التي لا تمتد وهي الافتراضية، و all التي تمتد عبر كل الأعمدة، لذا لا يمكنك المد عبر عمودين أو ثلاثة فقط. للمد الجزئي عبر الأعمدة، سيكون عليك محاكاته بحاويات متعددة الأعمدة متداخلة أو التبديل إلى تخطيط grid. هذا قيد متعمد في مواصفات CSS متعدد الأعمدة ولا يمكن التحايل عليه بقيمة.
Qما العناصر التي يمكنها استخدام column-span؟
Aيُطبَّق column-span على العناصر على مستوى الكتلة في التدفق ذي المستوى الأعلى لحاوية متعددة الأعمدة. أكثر الحالات شيوعًا هي العناوين من h1 إلى h6، والعناوين الفرعية، والاقتباسات البارزة التي تمتد عبر جميع الأعمدة كفاصل بصري. لا يمكن استخدامه على عناصر مُدخلة داخل عمود، ويدعمه المتصفحات يختلف؛ وقد تتجاهله المتصفحات القديمة ببساطة، لذا تعامل معه كتحسين تدريجي وصمّم دائمًا تراجع العمود الواحد أولًا.
Qلماذا لا يسري مفعول column-span:all؟
Aالأسباب المحتملة: أولًا، العنصر ليس عنصرًا فرعيًا مباشرًا على مستوى الكتلة للحاوية متعددة الأعمدة؛ وثانيًا، المتصفح قديم جدًا، إذ كان دعم المد عبر الأعمدة ناقصًا في بعض الإصدارات وكانت إصدارات Firefox المبكرة محدودة الدعم؛ وثالثًا، الحاوية متعددة الأعمدة نفسها غير نشطة، بعمود واحد فقط. أولًا تأكد من عرض الأعمدة، ثم تحقق من موضع العنصر في التسلسل الهرمي.
Qهل يكسر column-span ترتيب القراءة للنص متعدد الأعمدة؟
Aلا. يقسم عنصر column-span:all النص متعدد الأعمدة إلى قسمين: تُملأ الأعمدة أعلاه أولًا، ثم يُعرض العنصر الممتد، ثم تتابع الأعمدة أسفله. يبقى ترتيب القراءة متبعًا لتدفق المستند؛ العنوان الممتد يفرض ببساطة صفًا بكامل العرض. لذا فإن وضع عنوان ممتد في الأعلى يُبقي الجسم يتدفق بشكل طبيعي أسفله، وينطبق الأمر نفسه على العناصر الممتدة في منتصف المحتوى.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
