متى يجب إستعمال grid و flex في css

لكل منهما إستخدام مختلف عن الآخر، يختلط الأمر على كثير من المطورين لأن هناك الكثير من الأشياء التي يمكن القيام بها باستخدام flex box و grid في نفس الوقت.

الفرق الأساسي بينهما هو أن flex box مخصص لترتيب العناصر في خط واحد (صف row أو عمود column) بينما grid مخصص لترتيب العناصر في شكل شبكة ثنائية الأبعاد (صف وعمود معًا)، وبالتالي سيكون من الأسهل إستعمال flex box في المكونات الصغيرة مثل شريط التنقل nav bar أو ترتيب مكونات footer .. إلخ، بينما يُستعمل grid لتنظيم مكونات صفحة كاملة.

في هذه المقالة تم شرح الفرق بينهما ومتى يتم إستعمال كلًا منهما بشكل مفصل:

تعتبر flexbox و grid خاصيات حديثة تستخدم لتخطيط المواقع/الصفحات و بناء هيكليتها و هي تساعد بشكل كبير في جعل المواقع متجاوبة و في تخطيطها بشكل أسهل و يوجد العديد من الطرق التي تمكنك من تخطيط المواقع و جعلها متجاوبة مثل و لا يوجد أفضلية لإحداها على الأخرى و إنما يكمن الأمر في فهم وظيفة كلٍ منها و توظيفها في المكان الصحيح و الأنسب لها، أو دمجها مع وسائل و خصائص أخرى حتى نصل لأفضل نتيجة.

الخاصية  flexbox هي التقنية التي بُني على أساسها bootstrap و هي تقوم بتقسيم الصفحة إلى أعمدة و كذلك grid و لكن الفرق الأساسي بينهما هو أن  flexbox صممت لتنسيق الصفحة في بعد واحد أما  grid صممت لتنسيق الصفحة في بعدين.

الصورة التالية توضح ذلك:  

لاحظ هذا المثال فهو يوضح استخدام flexbox و grid معًا لبناء أربع تخطيطات مختلفة لنفس ال footer حسب مقاس الشاشة
 

يمكنك الإطلاع على المزيد من خلال الروابط التالية  flexbox  و  grid