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

في كل الإثارة حول CSS Grid Layout و Flexbox ، غالبًا ما يتم التغاضي عن طريقة تخطيط أخرى. في هذه المقالة سألقي نظرة على تخطيط متعدد الأعمدة - يشار إليه غالبًا باسم multicol أو أحيانًا "أعمدة CSS". ستجد المهام المناسبة لها ، وبعض الأشياء التي يجب الانتباه إليها عند إنشاء الأعمدة.

ما هو Multicol؟

الفكرة الأساسية لـ multicol ، هي أنه يمكنك أخذ جزء كبير من المحتوى وتدفقه في عدة أعمدة ، كما هو الحال في صحيفة. يمكنك القيام بذلك باستخدام إحدى خاصيتين. تحدد خاصية عدد column-count عدد الأعمدة التي ترغب في أن ينقسم المحتوى إليها. تحدد خاصية column-width المثالي ، مما يترك المتصفح ليحدد عدد الأعمدة التي تناسبه.

لا يهم العناصر الموجودة داخل المحتوى التي تقوم بتحويلها إلى حاوية متعددة الأجزاء ، يظل كل شيء في التدفق الطبيعي ، ولكنه مقسم إلى أعمدة. هذا يجعل multicol على عكس طرق التخطيط الأخرى التي لدينا في المتصفحات اليوم. Flexbox and Grid على سبيل المثال ، خذ العناصر الفرعية للحاوية وتلك العناصر ثم شارك في تخطيط مرن أو شبكة. باستخدام multicol ، لا يزال لديك تدفق عادي ، ما عدا داخل العمود.

في المثال أدناه ، أستخدم column-width ، لعرض أعمدة 14em على الأقل. يقوم Multicol بتعيين عدد 14em من الأعمدة التي تناسبه ثم يشارك المساحة المتبقية بين الأعمدة. ستكون الأعمدة 14em على الأقل ، ما لم نتمكن من عرض عمود واحد فقط وفي هذه الحالة قد يكون أصغر. كانت Multicol هي المرة الأولى التي رأينا فيها هذا النوع من السلوك في CSS ، حيث يتم إنشاء أعمدة كانت تستجيب بشكل افتراضي بشكل افتراضي. لا تحتاج إلى إضافة استعلامات الوسائط وتغيير عدد الأعمدة لنقاط التوقف المختلفة ، وبدلاً من ذلك نحدد العرض الأمثل وسيعمل المتصفح على حل المشكلة.

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

لا يمكن استهداف مربعات الأعمدة التي تم إنشاؤها عند استخدام إحدى خصائص العمود. لا يمكنك معالجتها باستخدام JavaScript ، ولا يمكنك تصميم مربع فردي لمنحه لون الخلفية أو ضبط المساحة المتروكة والهوامش. ستكون جميع مربعات الأعمدة بالحجم نفسه. الشيء الوحيد الذي يمكنك فعله هو إضافة قاعدة بين الأعمدة ، باستخدام خاصية قاعدة العمود ، والتي تعمل مثل الحدود. يمكنك أيضًا التحكم في الفجوة بين الأعمدة باستخدام خاصية column-gap ، والتي لها قيمة افتراضية تبلغ 1em ومع ذلك يمكنك تغييرها إلى أي وحدة طول صالحة.

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

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

أعمدة ممتدة

قد ترغب في بعض الأحيان في تقسيم بعض المحتوى إلى أعمدة ، ولكن بعد ذلك تتسبب في امتداد عنصر واحد عبر مربعات الأعمدة. يؤدي تطبيق خاصية column-span على منحدر من حاوية multicol إلى تحقيق ذلك.

في المثال أدناه ، تسببت في امتداد عنصر <blockquote> عبر أعمدتي. لاحظ أنه عند القيام بذلك ، يتم تقسيم المحتوى إلى مجموعة من المربعات أعلى النطاق ، ثم تبدأ مجموعة جديدة من مربعات الأعمدة أدناه. لا يقفز المحتوى عبر العنصر الممتد.

يتم حاليًا تنفيذ خاصية column-span في Firefox وهي خلف علامة ميزة.

اعلم أنه في المواصفات الحالية ، تكون قيم column-span إما all أو none . لا يمكنك تمديد بعض الأعمدة فقط ، ولكن يمكنك الحصول على نوع التخطيط الذي قد تراه في إحدى الصحف من خلال الجمع بين multicol وطرق التخطيط الأخرى. في هذا المثال التالي ، لدي حاوية شبكة ذات مسارين عمودين. المسار الأيسر هو 2fr ، والمسار الأيمن 1fr . المقالة الموجودة في المسار الأيسر التي قمت بتحويلها إلى حاوية multicol ذات مسارين ، وتحتوي أيضًا على عنصر ممتد.

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

السيطرة على فواصل المحتوى

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

عندما تقوم بتقسيم المحتوى الخاص بك إلى أعمدة ، فإنك تقوم بما يعرف بالتجزئة. وينطبق الشيء نفسه إذا قمت بتقسيم المحتوى الخاص بك بين الصفحات ، كما هو الحال عند إنشاء ورقة أنماط لسياق الطباعة. لذلك ، يعد multicol أقرب إلى الوسائط المُقسمة إلى صفحات منه إلى طرق التخطيط الأخرى على الويب. لهذا السبب ، كانت طريقة التحكم في الفواصل في المحتوى لعدة سنوات هي استخدام خصائص فواصل page-break- التي كانت جزءًا من CSS2.1.

• page-break-before
• page-break-after
• page-break-inside

في الآونة الأخيرة ، حددت مواصفات تجزئة CSS خصائص التجزئة المصممة لأي سياق مجزأ ، وتتضمن المواصفات تفاصيل للوسائط المُقسمة إلى صفحات والمواصفات المتعددة والمناطق المتوقفة ؛ تقوم المناطق أيضًا بتقسيم جزء مستمر من المحتوى. من خلال جعل هذه الخصائص عامة ، يمكن تطبيقها على أي سياق مجزأ في المستقبل ، بنفس الطريقة التي تم بها نقل خصائص المحاذاة من Flexbox إلى مواصفات Box Alignment حتى يمكن استخدامها في تخطيط الشبكة والكتلة.

• break-before
• break-after
• break-inside

على سبيل المثال ، لقد استخدمت break-inside avoid في عنصر <figure> ، لمنع فصل التسمية التوضيحية عن الصورة. يجب أن يحافظ المتصفح الداعم على الشكل معًا حتى لو تسبب ذلك في ظهور الأعمدة غير متوازنة.

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

مشكلة الأعمدة على الويب

أحد الأسباب التي تجعلنا لا نرى استخدام multicol كثيرًا على الويب هو حقيقة أنه سيكون من السهل جدًا أن ينتهي الأمر بتجربة قراءة تجعل القارئ يتنقل في بُعد الكتلة. قد يعني ذلك التمرير لأعلى ولأسفل عموديًا لمن يستخدمون اللغة الإنجليزية أو أي وضع كتابة رأسي آخر. هذه ليست تجربة قراءة جيدة!

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

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

كتلة أعمدة تجاوز السعة

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

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

ما فائدة Multicol اليوم؟

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

انهيار واجهة المستخدم الصغيرة أو عناصر النص

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

يمكنك مشاهدة مثال على multicol المستخدمة بهذه الطريقة بواسطة Sander de Jong على موقع DonarMuseum الإلكتروني.

كميات صغيرة معروفة من المحتوى

هناك أوقات نصمم فيها موقعًا نعلم فيه أن جزءًا من المحتوى صغير نسبيًا ، وسوف يتناسب مع غالبية الشاشات دون التسبب في التمرير غير المرغوب فيه. لقد استخدمت multicol في صفحات العروض التقديمية Notist ، كمقدمة للحديث.

صمم Andy Clarke مثالًا رائعًا لموقع Equfund على الويب.

لتجنب احتمال تسبب الشاشات الصغيرة جدًا في التمرير ، تذكر أنه يمكنك استخدام استعلامات الوسائط للتحقق من الارتفاع والعرض (أو في العالم المنطقي ، الحظر وكذلك المضمّن). إذا قمت فقط بتمكين الأعمدة عند نقطة توقف ذات حد min-height كبير بما يكفي لمحتواها ، فيمكن أن يوفر ذلك مستخدمي الأجهزة الصغيرة جدًا الذين يعانون من تجربة تمرير ضعيفة.

عرض المحتوى مثل الماسونية

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

لدى Veerle Pieters مثال جميل على استخدام multicol بهذه الطريقة في صفحة الإلهام الخاصة بها.

الشبكة و Flexbox الاحتياطية

يمكن أيضًا استخدام خصائص column- كبديل للتخطيط الشبكي والمرن. إذا حددت إحدى الخصائص في حاوية ، فقم بتحويل تلك الحاوية إلى تخطيط Flex أو Grid باستخدام display: flex أو display: grid . إذا كان لديك ، على سبيل المثال ، تخطيط بطاقات يستخدم تخطيط الشبكة ، وسيكون التخطيط قابلاً للقراءة إذا تم تشغيله في أعمدة بدلاً من الصفحة ، فيمكنك استخدام multicol كإجراء احتياطي بسيط. ستحصل المتصفحات التي لا تدعم Grid على شاشة multicol ، وستحصل تلك التي تدعم Grid على تخطيط الشبكة.

لا تنسى Multicol!

كثيرًا ما أجيب على أسئلة Grid و Flexbox حيث تكون الإجابة هي عدم استخدام Grid أو Flexbox ، ولكن بدلاً من ذلك ألقي نظرة على Multicol. من المحتمل أنك لن تستخدمها في كل موقع ، ولكن عندما تصادف حالة استخدام يمكن أن تكون مفيدة حقًا. يوجد في MDN موارد مفيدة لـ multicol وخصائص التجزئة ذات الصلة.

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