CSS/columns

الخاصية columns في CSS هي خاصية مختصرة تسمح لنا بضبط قيمة الخاصيتين column-width و column-count في آنٍ واحد.

/* column-width */
columns: 1em;

/* column-count */
columns: auto;
columns: 1;

/* column-width و column-count */
columns: 1 auto;
columns: auto 12em;
columns: auto auto;

/* القيم العامة */
columns: inherit;
columns: initial;
columns: unset;

القيمة الابتدائية	لكل خاصية مختصرة: column-width: auto column-count: auto
تُطبَّق على	جميع الحاويات الكتلية (block containers) عدا حاويات الجداول.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	لكل خاصية مختصرة: column-width: طول مطلق أكبر من الصفر. column-count: كما حُدِّدَت.

أمثلة

مثال على استخدام الخاصية columns لضبط قيمة الخاصية 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;
  columns: 3;
}

مثال على استخدام الخاصية columns لضبط قيمة الخاصية 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;
  columns: 3 150px;
}

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

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

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

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

القيمة <column-width>

قيمة طولية <length> تعطي المتصفح فكرةً عن العرض الأمثل للعمود، لكن عرض العمود الفعلي قد يكون أكبر من هذه القيمة (لملء المساحة الفارغة المتبقية)، أو أضيق (إذا كانت المساحة المتوافرة أقل من عرض العمود المُحدَّد). يجب أن تكون هذه القيمة موجبةً.

القيمة <column-count>

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

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

columns: <'column-width'> || <'column-count'>;

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

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