تخطيط العموديات في CSS3

يمكنك استخدام CSS3 لإنشاء نص مقسم إلى أعمدة متعددة.

إنشاء تخطيط متعدد الأعمدة

أدخل CSS3 مودل التخطيط المتعدد الأعمدة لإنشاء تخطيط متعدد الأعمدة بسهولة وإيجاز. الآن، لا تحتاج إلى استخدام الصناديق العائمة لإنشاء تخطيط مشابه للتخطيط الذي تراه في المجلات والصحف. هذا مثال بسيط على استخدام خاصية تخطيط الأعمدة المتعددة في CSS3 لإنشاء نص مقسم إلى ثلاثة أعمدة.

p {
　　　　-webkit-column-count: 3; /* Chrome, Safari, Opera */
　　　　　　　-moz-column-count: 3; /* Firefox */
　　　　　　　　　　　　column-count: 3;　
}

ضبط عدد الأعمدة أو العرض

تحدد خاصية CSS column-count و column-width ما إذا كان سيتم عرض الأعمدة وأي عدد من الأعمدة سيتم عرضها. تحدد خاصية column-count عدد الأعمدة في عنصر multicol، وتحدد خاصية column-width عرض الأعمدة المطلوب.

p {
　　　　-webkit-column-width: 150px; /* Chrome, Safari, Opera */
　　　　　　　-moz-column-width: 150px; /* Firefox */
　　　　　　　　　　　　column-width: 150px;　
}

ضبط فجوة الأعمدة

يمكنك استخدام خاصية column-gap لتعيين الفجوة بين الأعمدة. يتم تطبيق نفس الفجوة بين كل عمود. الفجوة الافتراضية هي normal، وهي تساوي 1em.

p {
　　　　/* Chrome, Safari, Opera */
　　　　-webkit-column-count: 3;
　　　　-webkit-column-gap: 100px;
　　　　/* Firefox */
　　　　-moz-column-count: 3;
　　　　-moz-column-gap: 100px;
　　　　
　　　　column-count: 3;
　　　　column-gap: 100px;
}

ضبط خط الأعمدة

يمكنك أيضًا استخدام خاصية column-rule لضبط خط بين الأعمدة، وهي خاصية مختصرة تستخدم لضبط عرض الخط، النمط والألوان في بيانة واحدة. تستخدم خاصية column-rule نفس القيم التي تستخدم في border و outline.

p {
　　　　/* Chrome, Safari, Opera */
　　　　-webkit-column-count: 3;
　　　　-webkit-column-gap: 100px;
　　　　-webkit-column-rule: 2px solid red;
　　　　/* Firefox */
　　　　-moz-column-count: 3;
　　　　-moz-column-gap: 100px;
　　　　-moz-column-rule: 2px solid red;
　　　　
　　　　column-count: 3;
　　　　column-gap: 100px;
　　　　column-rule: 2px solid red;
}

خصائص الصفوف المتعددة في CSS3

في الجدول أدناه يُلخص جميع خصائص الصفوف المتعددة بشكل مختصر: