مع زيادة التنوع في أحجام الشاشة ، من غير العملي تصميم قوالب نصية واحدة تشغل عرض الشاشة بالكامل. الحل التقليدي هو تقسيم النص إلى أعمدة يدويًا ، وهو وقت مكثف جدًا ؛ أو لتقسيم النص ديناميكيًا باستخدام جافا سكريبت ، وهو أمر لا يعمل عالميًا. إلى جانب ذلك ، هذه مشكلة في العرض التقديمي ، يجب أن نكون قادرين على تصميمها مع CSS دون استخدام أنظمة الشبكة أو العوامات لا ينبغي لنا؟
في الواقع ، يوفر CSS3 طريقة لكتابة النص الخاص بك إلى أعمدة مختلفة ، حتى أنه يوفر القدرة على ضبط ميزاب - المسافة بين هذه الأعمدة - بهذه الطريقة لديك التحكم الكامل بدلاً من إطار العمل أو نظام الشبكة الذي يحدد هذه الفجوات لك .
أفضل من ذلك كله ، يحل CSS3 برشاقة ، لذلك إذا كان شخص ما يتصفح في Netscape Navigator ، فإن موقعك لن ينكسر.
من المهم ملاحظة أنه بينما تدعم جميع المتصفحات الحالية أعمدة متعددة في CSS3 - نعم حتى IE10 - العديد من الإصدارات الحديثة - IE9 على سبيل المثال - لا تفعل ذلك. على الرغم من أن الدعم جيد ، سترغب في تضمين بادئات المتصفح لـ webkit (-webkit-) و mozilla (-moz-). ليس هناك حاجة لتضمين -ms- أو -o- لـ IE و Opera ، حيث إنهم يدعمون الميزة بالكامل ، أو لا يدعمونها على الإطلاق.
تمنحك ميزة CSS هذه في الواقع عددًا قليلاً من الخصائص لتمنحك تحكمًا كاملاً في كيفية طباعة المحتوى في المتصفح وهذه الخصائص هي:
مع كل هذه الخصائص لا أعتقد أننا بحاجة إلى أي شيء آخر للتحكم الكامل في أعمدةنا. بالطبع ليست كل هذه الخصائص ضرورية للتخطيط متعدد الأعمدة للعمل ، في الواقع فقط عدد الأعمدة ضروري ولكن يجب عليك دائما استخدام فجوة الأعمدة لإعطاء النص مساحة صغيرة وليس كل الأعمدة على فوق واحد آخر.
لوضع هذا موضع التنفيذ ، فإنه يأخذ فقط سطرين من التعليمات البرمجية:
/* This will produce a 3 column layout with a gap of 20px between each column */.cols3 {column-count: 3;column-gap: 20px;}إذا كنت ترغب أيضًا في تطبيق قاعدة على الأعمدة ، فما عليك سوى إضافة الخصائص الإضافية:
/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */.cols3 {column-count: 3;column-gap: 20px;column-rule-width: 1px;column-rule-style: solid;column-rule-color: #000;}مثل خاصية الحدود الأكثر شيوعًا ، يمكنك أيضًا تكديس اللون والنمط والعرض في نفس السطر ، مثل:
.cols3 {column-count: 3;column-gap: 20px;column-rule: 1px solid #000;}إذا كان لديك عنوان وتريد أن يتخطى هذا العنوان جميع الأعمدة ، فستحتاج فقط لإضافة سطر واحد:
/*This h1 will take up the space of the 3 columns*/.cols3 h1{column-span: all;}يمكنك تطبيق هذا على أي HTML تقريبًا ، من فقرة واحدة إلى متعددة