هذا ليس بلاغيًا: أنا مهتم حقًا بالعثور على حالات استخدام رائعة لتخطيطات CSS متعددة الأعمدة.
الجواب يبدو واضحا. استخدم الأعمدة عندما تريد تقسيم أي محتوى إلى أعمدة ، أليس كذلك؟ إليك بشكل عام نوع المثال الذي ستجده في المقالات التي توضح كيفية عمل تخطيطات CSS متعددة الأعمدة ، بما في ذلك تخطيطاتنا الخاصة جدًا تقويم:
الحق علي. لكن هل هذه حالة استخدام فعلية؟ مممايب. إذا كان النص موجزًا نسبيًا ، فربما يكون لمسة لطيفة. هذه هي الطريقة التي بعتها لنفسي عند إعادة تصميم موقع الويب الخاص بي من بضع سنوات. ليس الأمر كذلك اليوم ، ولكن هذا ما كان يبدو عليه حينها:
لكن مقالة طويلة كاملة مقسمة إلى أعمدة؟ أحبه في الصحف ولكني متردد في التمرير لأسفل صفحة ويب لقراءة عمود واحد ، فقط للتمرير مرة أخرى لأعلى للقيام بذلك مرة أخرى.
أفترض أنه يمكننا استخدامه لوضع عنصرين جنبًا إلى جنب ، لكن flexbox أكثر ملاءمة لذلك. بالإضافة إلى ذلك ، يمنعنا القيد من اختيار الأعمدة لتغيير حجمها بشكل فردي. يجب أن تكون الأعمدة بنفس العرض.
شيء واحد في الأعمدة هو أنها طريقة تخطيط CSS الوحيدة التي فتات المحتوى. (هذا ما لم نعد مناطق CSS... ماذا حدث لهؤلاء ، على أي حال ؟!) لذلك ، إذا كنت تريد تقسيم فقرة إلى أعمدة ، فهذا ممكن بالفعل بدون أغلفة إضافية.
متى قد تحتاج أيضًا إلى تقسيم كتلة مستمرة من المحتوى إلى أعمدة؟ أتذكر أنني كنت بحاجة إلى القيام بذلك عندما كان لدي قائمة كبيرة من العناصر غير المرتبة. تعجبني الطريقة التي تسهل بها القوائم فحص المحتوى ، لكن القوائم الطويلة يمكن أن تجعل جانبًا واحدًا من الصفحة يبدو ثقيلًا للغاية. لنفترض ، على سبيل المثال ، أننا كنا ندرج جميع علامات النشر لـ CSS-Tricks في مجموعات أبجدية. يعمل التخطيط متعدد الأعمدة بشكل جميل من أجل:
انطلق وحاول تغيير حجم عرض منفذ العرض. تم تحديد ثلاثة أعمدة ولكن الرقم سيتغير بناءً على مقدار المساحة المتاحة. فلدي أحب كل ذلك الخير المتجاوب دون عمل الاستعلام عن الوسائط!
كنت أعمل على عرض توضيحي لـ :left فئة زائفة ووصلت إلى columns لأنها طريقة رائعة لتفتيت الأشياء لطباعة العروض التوضيحية. لذا أعتقد أن هناك حالة استخدام أخرى. وأثناء عمل عرض توضيحي ، أدركت أنه يمكن استخدام تخطيط متعدد الأعمدة لإنشاء شبكة من العناصر ، مثل معرض الصور:
لكن ماذا بعد؟ هل نحن مقيدون بالفقرات القصيرة والقوائم الطويلة والشبكات التي تتدفق بحرية؟
