الخاصية column-count

الخاصية column-count في CSS هي تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها.

بطاقة الخاصية

القيمة الابتدائية	auto
تُطبَّق على	جميع الحاويات الكتلية (block containers) عدا حاويات الجداول.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	كما حُدِّدَت.

/* <integer> قيمة عددية */
column-count: 3;

/* كلمة محجوزة */
column-count: auto;

/* القيم العامة */
column-count: inherit;
column-count: initial;
column-count: unset;

أمثلة

مثال على استخدام الخاصية column-count وضبط قيمتها إلى 3:

<p class="content-box">
هذه فقرةٌ نصيةٌ ستُقسَم إلى ثلاثة أعمدة باستخدام CSS،
لاحظ أنَّ النص سيوزَّع بالتساوي بين الأعمدة.
</p>

شيفرة CSS:

.content-box {
  margin: 1em;
  padding: 1em;
  width: 400px;
  border: 1px solid #eaecf0;
  background-color: #f8f9fa;
  column-count: 3;
}

مثال على ضبط قيمة الخاصية column-count إلى 3 للإشارة إلى العدد الأقصى للأعمدة، وسنضبط قيمة الخاصية column-width إلى 150px:

<p class="content-box">
هذه فقرةٌ نصيةٌ ستُقسَم إلى عمودين باستخدام CSS،
لاحظ أنَّ النص سيوزَّع بالتساوي بين الأعمدة.
</p>

شيفرة CSS:

.content-box {
  margin: 1em;
  padding: 1em;
  width: 400px;
  border: 1px solid #eaecf0;
  background-color: #f8f9fa;
  column-count: 3 ;
  column-width: 150px;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	4.0 (مع السابقة -webkit-) 50 (دون سابقة)	2.0 (مع السابقة -moz-)	10	15 (مع السابقة -webkit-) 37 (دون سابقة)	3.1 (مع السابقة -webkit-) 10 (دون سابقة)

البنية العامة

تقبل الخاصية column-count قيمةً واحدةً أو قيمتين.

auto

تُشير هذه الكلمة المحجوزة إلى أنَّ عدد الأعمدة سيُحدَّد عبر خاصيات CSS الأخرى مثل column-width.

<integer>

عدد صحيح موجب <integer> يُحدِّد العدد المثالي للأعمدة التي يجب تقسيم المحتوى إليها، وإذا ضٌبِطَت الخاصية column-width إلى قيمة لا تساوي auto، فستُشير هذه القيمة إلى العدد الأقصى من الأعمدة المسموحة.

البنية الرسمية

column-count: <integer> | auto;

مصادر ومواصفات

• مواصفة CSS Multi-column Layout Module.