Flexbox و Grid: مقارنة شاملة لبناء التصميمات الأكثر شيوعًا في HTML

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

لكل تصميم، ستجد رابطًا مباشرًا إلى الكود الكامل (HTML و CSS) على منصة CodePen. تجدر الإشارة إلى أننا نستخدم SASS لكتابة تعريفات الأنماط. إذا كنت ترغب في تطبيق ذلك محليًا، يمكنك تثبيت SASS عبر الأمر التالي:

npm i sass -g

قالب البطاقة الأساسي

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

• النتيجة: Flexbox
• CodePen Flexbox
• CodePen Grid

لنبدأ الآن في إنشاء تخطيطاتنا المختلفة.

1. بطاقة متمركزة أفقيًا وعموديًا

باستخدام Flexbox:

لتحقيق هذا التمركز باستخدام Flexbox، نحتاج إلى عنصر واحد يتمركز أفقيًا، وعنصر آخر (الابن) يتمركز عموديًا. يتم تحديد ترتيب العناصر بواسطة الخاصية flex-direction. أما كيفية وضع العنصر نفسه في المساحة المتاحة، فيتم ضبطها باستخدام align-self على العنصر نفسه أو align-items على العنصر الأب.

باستخدام Grid:

مع Grid، نحتاج إلى ثلاثة أعمدة وثلاثة صفوف، ثم نضع البطاقة في الخلية الوسطى. التمركز الأفقي سهل؛ نحدد ثلاثة أعمدة وأحجامها باستخدام grid-template-columns: auto 33% auto، حيث يجب أن تكون البطاقة بعرض ثلث المساحة المرئية. تكمن المشكلة في أننا لا نعرف الأبعاد العمودية. نريد أن تشغل الصفوف العلوية والسفلية المساحة المتبقية، وهو أمر غير ممكن مباشرة مع Grid. على الرغم من أن البطاقة تتمركز، إلا أن ارتفاعها يعتمد على ارتفاع النافذة. ومع ذلك، يمكننا حل هذه المشكلة باستخدام عنصر تغليف إضافي حول البطاقة وتمركزها باستخدام الهامش (margin).

• النتيجة: Flexbox
• CodePen Flexbox
• CodePen Grid

2. بطاقتان متمركزتان أفقيًا وعموديًا

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

باستخدام Flexbox:

مع Flexbox، نحتاج إلى تغليف كلتا البطاقتين داخل عنصر آخر واستخدامه لتمركزهما معًا. لا يمكننا استخدام align-items هنا لأنه ينطبق على المحور Y في هذه الحالة. بدلاً من ذلك، نحتاج إلى تحديد كيفية توزيع المساحة المتبقية على المحور X باستخدام justify-content: center. هذا يضمن تمركز البطاقتين أفقيًا.

باستخدام Grid:

إذا تجاهلنا مشكلة الارتفاع المتغير في Grid، يمكننا تحقيق نفس النتيجة حتى بدون أي عناصر تغليف إضافية. هذه المرة، نحدد الشبكة بخمسة أعمدة باستخدام grid-template-columns: auto 33% 50px 33% auto. أما باقي الإعدادات فتبقى كما هي في المثال السابق.

• النتيجة: Flexbox
• CodePen Flexbox
• CodePen Grid

3. بطاقات متعددة بنفس العرض والارتفاع

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

باستخدام Flexbox:

يمكن تحقيق ذلك في Flexbox باستخدام الخاصية flex-wrap: wrap. ستنتقل العناصر إلى السطر التالي إذا تجاوز عرضها المساحة المتبقية من كل سطر. ومع ذلك، يتم الحفاظ على نفس الارتفاع فقط ضمن نطاق سطر واحد، ما لم تحدده صراحة.

باستخدام Grid:

هنا يظهر Grid قوته الحقيقية. يمكن إنشاء هذا التخطيط باستخدام grid-auto-rows: 1fr، مما يفرض نفس الارتفاع على جميع الصفوف تلقائيًا.

• النتيجة: Grid
• CodePen Flexbox
• CodePen Grid

4. تبديل النص والصور مع التمركز العمودي والأفقي

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

باستخدام Flexbox:

كل صف هو عنصر article مقسم إلى حاويتين فرعيتين، .img و .content. هذه الحاويات ضرورية لتوزيع متساوٍ للحجم (flex-basis: 50%). يتم تعريف التمركز العمودي للمحتوى الداخلي بواسطة align-items: center. يتم تحقيق التناوب عن طريق عكس اتجاه Flexbox باستخدام flex-direction: row-reverse على كل عنصر article فردي.

باستخدام Grid:

يتعامل Grid مع حالة الاستخدام هذه بشكل جيد أيضًا. لا نحتاج إلى تعريف شبكة عملاقة واحدة، بل شبكة لكل عنصر article. تحدد هذه الشبكة أعمدة متساوية العرض تتمركز عموديًا باستخدام align-items: center. يتم تعريف التناوب على مستوى الخلية عن طريق تبديل القيم لخاصية grid-column.

• النتيجة: تعادل
• CodePen Flexbox
• CodePen Grid

5. ترويسة أفقية مع قائمة تنقل

باستخدام Flexbox:

لتحقيق هذا التصميم باستخدام Flexbox، يجب تمثيل جانبي الترويسة بعنصر واحد لكل جانب.

يشكل الشعار واسم الشركة عنصر anchor واحدًا على اليسار، بينما تكون القائمة (menu) عنصر nav واحدًا على اليمين. يقوم Flexbox بوضع هذه العناصر باستخدام justify-content: space-between، مما يوزع المساحة بينهما بفعالية.

باستخدام Grid:

مع Grid، نحتاج إلى عمودين: أحدهما للشعار والآخر للقائمة. القائمة نفسها عبارة عن شبكة أخرى توزع حجم الأعمدة بالتساوي باستخدام grid-template-columns: repeat(4, minmax(0, 1fr)). تكمن المشكلة هنا في أنه إذا أردنا إضافة عنصر آخر إلى القائمة، فسنحتاج أيضًا إلى تعديل تعريفات CSS، مما يجعلها أقل مرونة.

• النتيجة: Flexbox
• CodePen Flexbox
• CodePen Grid

والفائز هو…

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

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

كمطور واجهة أمامية، لن تتمكن من الاستغناء عن معرفة كليهما. كلاهما أدوات قوية وتكميلية في ترسانة أي مطور ويب حديث.

• دليل مرجعي لـ Flexbox
• دليل مرجعي لـ Grid

الخلاصة التقنية

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