كيفية استخدام أعمدة CSS لتخطيطات مواقع الويب متعددة الأعمدة

لعدة سنوات، CSS يطفو عنصرًا صعبًا ، ولكنه ضروري ، في إنشاء تخطيطات مواقع الويب. إذا كان تصميمك يستدعي أعمدة متعددة ، فقد تحولت إلى عوامات. تكمن مشكلة هذه الطريقة في أنه على الرغم من البراعة المذهلة التي أظهرها مصممو / ​​مطورو الويب في إنشاء موقع معقد التخطيطات، لم يكن من المفترض حقًا استخدام عوامات CSS بهذه الطريقة.

بينما من المؤكد أن العوامات ومواضع CSS لها مكان في تصميم الويب لسنوات عديدة قادمة ، تصميم أحدث تقدم التقنيات بما في ذلك CSS Grid و Flexbox الآن لمصممي الويب طرقًا جديدة لإنشاء تخطيطات مواقعهم. أسلوب تخطيط جديد آخر يُظهر الكثير من الإمكانات هو CSS Multiple Columns.

كانت أعمدة CSS موجودة منذ بضع سنوات حتى الآن ، ولكن نقص الدعم في المتصفحات القديمة (الأقدم بشكل رئيسي إصدارات Internet Explorer) منعت العديد من محترفي الويب من استخدام هذه الأنماط في إنتاجهم الشغل.

مع انتهاء الدعم لتلك الإصدارات القديمة من IE ، يقوم بعض مصممي الويب الآن بتجربة تخطيط CSS جديد الخيارات ، أعمدة CSS المضمنة ، واكتشاف أن لديهم تحكمًا أكبر بكثير مع هذه الأساليب الجديدة أكثر مما فعلوا به يطفو.

أساسيات أعمدة CSS

كما يوحي اسمها ، فإن CSS Multiple Columns (المعروف أيضًا باسم CSS3 تخطيط متعدد الأعمدة) يسمح لك بتقسيم المحتوى إلى عدد محدد من الأعمدة. خصائص CSS الأساسية التي قد تستخدمها هي:

• عدد الأعمدة
• فجوة العمود

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

من الأمثلة الشائعة على أعمدة CSS المتعددة عمليًا تقسيم كتلة من محتوى نصي إلى أعمدة متعددة ، على غرار ما قد تراه في مقال صحفي. لنفترض أن لديك ترميز HTML التالي (لاحظ أنه على سبيل المثال ، قمنا بوضع بداية فقرة واحدة ، بينما من المحتمل أن تكون هناك فقرات متعددة للمحتوى في هذا الترميز من الناحية العملية):

عنوان مقالتك.

تخيل الكثير من فقرات النص هنا ...

إذا كتبت بعد ذلك أنماط CSS هذه:

.المحتوى {
عدد الأعمدة: 3 ؛
عدد الأعمدة في مجموعة الويب: 3 ؛
عدد الأعمدة: 3 ؛
فجوة عمود الأعمدة: 30 بكسل ؛
فجوة عمود الشبكة: 30 بكسل ؛
فجوة العمود: 30 بكسل ؛
}

ستقسم قاعدة CSS هذه قسم "المحتوى" إلى 3 أعمدة متساوية مع فجوة 30 بكسل بينهما. إذا كنت تريد عمودين بدلاً من 3 ، فيمكنك ببساطة تغيير هذه القيمة وسيحسب المتصفح العروض الجديدة لتلك الأعمدة لتقسيم المحتوى بالتساوي. لاحظ أننا نستخدم الخصائص التي يبدأها البائع أولاً ، متبوعة بالإعلانات غير المسبوقة.

بهذه السهولة ، فإن استخدامها بهذه الطريقة مشكوك فيه لاستخدام موقع الويب. نعم ، يمكنك تقسيم مجموعة من المحتوى إلى عدة أعمدة ، ولكن قد لا تكون هذه أفضل قراءة تجربة الويب ، خاصةً إذا كان ارتفاع هذه الأعمدة يقع أسفل "حظيرة" شاشة.

سيتعين على القراء بعد ذلك التمرير لأعلى ولأسفل لقراءة المحتوى الكامل. ومع ذلك ، فإن مبدأ أعمدة CSS سهل كما ترى هنا ، ويمكن استخدامه للقيام بأكثر من مجرد تقسيم محتوى بعض الفقرات - يمكن بالفعل استخدامه للتخطيط.

تخطيط مع أعمدة CSS

لنفترض أن لديك صفحة ويب بها منطقة محتوى بها 3 أعمدة من المحتوى. هذا تخطيط موقع شائع جدًا ، ولتحقيق هذه الأعمدة الثلاثة ، عادةً ما تقوم بتعويم الأقسام الموجودة فيها. مع أعمدة CSS المتعددة ، يكون الأمر أسهل بكثير.

إليك بعض نماذج HTML:

من مدونتنا.

سيذهب المحتوى هنا ...

الأحداث القادمة.

سيذهب المحتوى هنا ...

يبدأ CSS لإنشاء هذه الأعمدة المتعددة بما رأيته سابقًا:

.المحتوى {
عدد الأعمدة: 3 ؛
عدد الأعمدة في مجموعة الويب: 3 ؛
عدد الأعمدة: 3 ؛
فجوة عمود الأعمدة: 30 بكسل ؛
فجوة عمود الشبكة: 30 بكسل ؛
فجوة العمود: 30 بكسل ؛
}

الآن ، التحدي هنا هو أن المتصفح يريد تقسيم هذا المحتوى بالتساوي ، لذلك إذا كان طول محتوى هذه الأقسام مختلفًا ، فسيقوم هذا المتصفح في الواقع بتقسيم محتوى التقسيم الفردي ، إضافة بدايته إلى عمود واحد ثم المتابعة إلى عمود آخر (يمكنك رؤية ذلك باستخدام هذا الرمز لإجراء تجربة وإضافة أطوال مختلفة من المحتوى داخل كل قطاع).

هذا ليس ما تريده. تريد أن يقوم كل قسم من هذه الأقسام بإنشاء عمود مميز ، وبغض النظر عن حجم محتوى القسم الفردي أو صغره ، فلن ترغب أبدًا في تقسيمه. يمكنك تحقيق ذلك عن طريق إضافة هذا السطر الإضافي من CSS:

.content div {
عرض: مضمنة كتلة ؛
}

سيؤدي هذا إلى إجبار تلك الأقسام الموجودة داخل "المحتوى" على البقاء كما هي حتى أثناء تقسيم المتصفح إلى عدة أعمدة. والأفضل من ذلك ، نظرًا لأننا لم نقدم أي شيء هنا عرضًا ثابتًا ، فسيتم تغيير حجم هذه الأعمدة تلقائيًا مع تغيير حجم المتصفح ، مما يجعلها تطبيقًا مثاليًا لـ المواقع المستجيبة. مع وجود نمط "inline-block" في مكانه الصحيح ، سيكون كل قسم من الأقسام الثلاثة عمودًا مميزًا من المحتوى.

استخدام عرض العمود

هناك خاصية أخرى إلى جانب "عدد الأعمدة" التي يمكنك استخدامها ، واعتمادًا على احتياجات التصميم الخاصة بك ، فقد يكون في الواقع خيارًا أفضل لموقعك. هذا هو "عرض العمود". باستخدام نفس ترميز HTML كما هو موضح سابقًا ، يمكننا بدلاً من ذلك القيام بذلك باستخدام CSS الخاص بنا:

.المحتوى {
عرض العمود: 500 بكسل ؛
-عرض عمود مجموعة الويب: 500 بكسل ؛
عرض العمود: 500 بكسل ؛
فجوة عمود الأعمدة: 30 بكسل ؛
فجوة عمود الشبكة: 30 بكسل ؛
فجوة العمود: 30 بكسل ؛
}
.content div {
عرض: مضمنة كتلة ؛
}

الطريقة التي يعمل بها هذا هي أن المتصفح يستخدم "عرض العمود" هذا كقيمة قصوى لهذا العمود. لذلك إذا كان عرض نافذة المتصفح أقل من 500 بكسل ، فستظهر هذه الأقسام الثلاثة في عمود واحد ، واحد في أعلى الآخر. هذا تخطيط نموذجي يستخدم لتخطيطات الشاشة الصغيرة / الجوال.

كلما زاد عرض المتصفح ليكون كبيرًا بما يكفي ليلائم عمودين مع فجوات الأعمدة المحددة ، سينتقل المتصفح تلقائيًا من تخطيط عمود واحد إلى عمودين. استمر في زيادة عرض الشاشة ، وفي النهاية ، ستحصل على تصميم مكون من 3 أعمدة ، مع عرض كل قسم من الأقسام الثلاثة في عمودهم الخاص. مرة أخرى ، هذه طريقة رائعة للحصول على استجابة متعدد الأجهزة ودية التنسيقات ، ولا تحتاج حتى إلى استخدامها تساؤلات الإعلام لتغيير أنماط التخطيط!

خصائص العمود الأخرى

بالإضافة إلى الخصائص المذكورة هنا ، هناك أيضًا خصائص لـ "قاعدة العمود" ، بما في ذلك قيم اللون والنمط والعرض التي تسمح لك بإنشاء قواعد بين الأعمدة الخاصة بك. سيتم استخدام هذه بدلاً من الحدود إذا كنت تريد أن يكون لديك بعض الأسطر التي تفصل بين الأعمدة الخاصة بك.

حان وقت التجربة

حاليًا ، CSS Multi Column Layout مدعوم جيدًا جدًا. باستخدام البادئات ، سيتمكن أكثر من 94٪ من مستخدمي الويب من رؤية هذه الأنماط ، وستكون هذه المجموعة غير المدعومة مجرد إصدارات أقدم بكثير من Internet Explorer والتي لم تعد مدعومة على أي حال.

مع وجود هذا المستوى من الدعم الآن ، لا يوجد سبب لعدم البدء في تجربة أعمدة CSS ونشر هذه الأنماط في مواقع الويب الجاهزة للإنتاج. يمكنك بدء تجاربك باستخدام HTML و CSS المقدمين في هذه المقالة والتلاعب بقيم مختلفة لمعرفة ما هو الأفضل لاحتياجات تخطيط موقعك.