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