CSS/column-count

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

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

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

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

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

أمثلة

مثال على استخدام الخاصية 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.