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