CSSالأعمدة المتعددة

مفهوم الأعمدة المتعددة

تخطيط الأعمدة المتعددة ( Multi-Column Layout ) هو أسلوب لعرض النصوص على شكل أعمدة تماماً كما يتم عرض النصوص في الصحف.

عند عرض النص على شكل أعمدة فإنك قادر على تحديد عدد الأعمدة التي تريد توزيع النص عليها، حجم الهامش بين الأعمدة، عرض خطوط فاصلة بين الأعمدة و غيرها.

في هذا الدرس سنتعرف على جميع الخصائص التالية و القيم التي يمكن إعطائها لها:

column-count column-gap column-rule-style column-rule-width column-rule-color column-rule column-span column-width

تحديد عدد الأعمدة النصية

لتحديد عدد الأعمدة التي يمكن أن يظهر النص عليها يمكنك استخدام الخاصية column-count و تمرير عدد الأعمدة كقيمة لها.

في المثال التالي قمنا بجعل النص يظهر على ثلاث أعمدة.

.newspaper {
    column-count: 3;
}

إضافة هامش بين الأعمدة النصية

لإضافة أو تحديد حجم الهامش بين الأعمدة النصية نستخدم الخاصية column-gap و نضع لها عدد بوحدة قياس محددة كقيمة مثل px، pt، cm ليمثل حجم الهامش.

في المثال التالي قمنا بإضافة هامش بين الأعمدة 40 بكسل.

.newspaper {
    column-gap: 40px;
}

إظهار حدود الأعمدة النصية

لتحديد شكل الحدود بين الأعمدة النصية يمكنك استخدام الخاصية column-rule-style و تمرير إحدى القيم المخصصة لتحديد شكل الحدود لها.

.newspaper {
    column-rule-style: solid;
}

لتحديد سُمك الحدود بين الأعمدة النصية يمكنك استخدام الخاصية column-rule-width و تمرير عدد بوحدة قياس معينة لها.

.newspaper {
    column-rule-width: 1px;
}

لتحديد لون الحدود بين الأعمدة النصية يمكنك استخدام الخاصية column-rule-color و تمرير اللون لها كقيمة.

.newspaper {
    column-rule-color: deeppink;
}

لتحديد كل خصائص الحدود بشكل مختصر ( Shorthand )، يمكنك استخدام الخاصية column-rule و تمرير القيمة التي تمثّل سُمكها، شكلها و لونها تباعاً.

.newspaper {
    column-rule: 1px solid deeppink;
}

تحديد عرض الأعمدة النصية

لتحديد كم هو العرض الأدنى للعمود، يمكنك استخدام الخاصية column-width مع وضع عدد بوحدة قياس محددة لها كقيمة مثل px، pt، cm.

في المثال التالي قمنا بتحديد أن حجم كل عمود من الأعمدة يجب أن يكون على الأقل 100 بكسل.

.newspaper {
    column-width: 100px;
}

دمج الأعمدة النصية

في حال أردت إظهار عنوان يظهر على جميع أعمدة النص بدون أن يتم تقطيعه إلى أعمدة، يمكنك استخدام الخاصية column-span و هذه القيم التي يمكنك تمريرها لها:

• none هي القيمة الإفتراضية و التي تجعل محتوى العنصر يظهر في العمود و يمكنه أن يتوزع على عدة أعمدة.
• all تقوم بدمج الأعمدة حيث سيظهر محتوى العنصر، و من بعده يعود باقي المحتوى للظهور بداخل الأعمدة.

h3 {
    column-span: all;
}

تحديد عدد و حجم الأعمدة النصية

يمكنك استخدام الخاصية columns لتحديد أقل عرض ممكن للأعمدة النصية و عددها دفعة واحدة بدلاً من استخدام column-width و column-count لأجل ذلك.

.newspaper {
    columns: 100px 3;
}