خاصية columns
آخر تحديث: 2026-09-13
columns خاصية columns
خاصية columns هي الاختصار لـ column-count و column-width، وتقسّم محتوى العنصر إلى عدة أعمدة تلقائيًا، بشكل مشابه لطباعة الصحف. تُستخدم غالبًا لعرض النصوص الطويلة في عدة أعمدة لقراءة أفضل.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
columns: auto | <integer> || auto | <length>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | كلمة مفتاحية | يحسب عدد الأعمدة تلقائيًا. |
<integer> | النوع | عدد ثابت من الأعمدة. |
<length> | النوع | عرض عمود ثابت. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| columns | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： columns هو اختصار لـ column-count و column-width؛ إذا كُتبت قيمة واحدة فقط، يستنتج المتصفح من نوعها ما إذا كانت عدد الأعمدة أو عرض العمود.
تحذير： تحتاج التخطيطات متعددة الأعمدة إلى ارتفاع محدد أو محتوى كافٍ لإظهار الانقسام إلى أعمدة؛ وإلا قد يظل المحتوى معروضًا في عمود واحد.
❓ الأسئلة الشائعة
Qما الفرق بين columns و Flexbox للتخطيطات متعددة الأعمدة؟
Aتسمح columns، وهي تخطيط CSS متعدد الأعمدة، بتدفق المحتوى تلقائيًا من عمود إلى الذي يليه، مثل الصحيفة؛ فيُقسَّم كتلة نص واحدة عبر الأعمدة مع بقاء ترتيب القراءة متصلًا. أما Flexbox، فتجعل كل عنصر فرعي عمودًا مستقلًا دون تدفق محتوى بينها. استخدم columns للنص المتدفق و flex لترتيب عناصر فرعية منفصلة جنبًا إلى جنب.
Qكيف أجعل عنوانًا يمتد عبر جميع الأعمدة؟
Aعيّن column-span:all على العنوان، فيمتد عبر جميع الأعمدة بينما يبقى نص الجسم مقسومًا أسفله. هذه هي البنية الأكثر شيوعًا للمقالات متعددة الأعمدة: عنوان بكامل العرض مع نص الجسم في أعمدة. لاحظ أن column-span تقبل فقط none و all، لذا لا يمكنك المد عبر عدد محدد من الأعمدة، ويجب أن يكون العنوان عنصرًا فرعيًا مباشرًا للحاوية متعددة الأعمدة.
Qكيف أفهم اختصار columns؟
Acolumns هو اختصار لـ column-count و column-width. بقيمة واحدة، يستنتج المتصفح المعنى من النوع: عدد صحيح مثل columns:3 هو عدد الأعمدة، وطول مثل columns:200px هو عرض العمود. يمكن إعطاء كلاهما معًا، فمثلًا columns: 200px 3 تعني أعمدة بعرض نحو 200px بحد أقصى 3 منها، إعداد كامل متعدد الأعمدة في سطر واحد.
Qما مدى دعم المتصفحات للتخطيطات متعددة الأعمدة؟
Aتدعم المتصفحات الحديثة خصائص columns و column-count و column-gap و column-rule بشكل جيد؛ إذ يغطيها Chrome و Edge و Firefox و Safari جميعًا. ويتطلب column-span:all إصدارات أحدث، وفي المتصفحات القديمة يعود التخطيط إلى عمود واحد مع بقاء المحتوى كاملًا. ذلك يجعل التخطيط متعدد الأعمدة تحسينًا تدريجيًا آمنًا يمكنك استخدامه بلا قلق، لأن أسوأ الحالات هو تراجع مقروء إلى عمود واحد بدل صفحة مكسورة.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
