𝗖𝗦𝗦 𝗚𝗿𝗶𝗱 𝘃𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅
توقف عن الصراع مع تخطيطات CSS الخاصة بك.
كنت أقضي ساعات في إصلاح التخطيطات المعطلة باستخدام Flexbox. كنت أحاول لف العناصر في صف واحد، ولكن العنصر الأخير كان يتمدد عبر الشاشة بأكملها. كان المظهر غير صحيح. جربت الهوامش (margins) وحلولاً برمجية إضافية، ولكن لم ينجح شيء.
ثم غيرت عقليتي إلى CSS Grid.
الفرق بسيط:
- Flexbox مخصص للتخطيطات أحادية البعد. استخدمه لصف واحد أو عمود واحد.
- CSS Grid مخصص للتخطيطات ثنائية البعد. استخدمه عندما تحتاج إلى التحكم في كل من الصفوف والأعمدة في نفس الوقت.
فكر في Flexbox كأداة للمهام الصغيرة. وفكر في Grid كأداة لهيكل صفحتك بالكامل.
فخ Flexbox:
عندما تستخدم Flexbox لمعرض صور (gallery)، قد لا تصطف العناصر بشكل مثالي على كل حجم شاشة. غالبًا ما ينتهي بك الأمر بعناصر "يتيمة" تكسر إيقاع تصميمك.
حل Grid:
باستخدام Grid، يمكنك إنشاء معارض صور متجاوبة بسطر واحد من الكود.
استخدم هذا:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
هذا يخبر المتصفح بوضع أكبر عدد ممكن من الأعمدة بعرض 250 بكسل. المتصفح يقوم بالحسابات بدلاً منك. لا مزيد من التخمين، ولا مزيد من الصفوف المعطلة.
مثال لوحة التحكم (Dashboard):
بناء لوحة تحكم تحتوي على شريط جانبي (sidebar)، ومحتوى رئيسي، وتذييل (footer) هو أمر صعب باستخدام Flexbox. غالبًا ما تحتاج إلى حاويات متداخلة وكود فوضوي لجعل التذييل يمتد على كامل العرض.
باستخدام Grid، تقوم بتعريف المسارات (tracks) مرة واحدة:
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
يمكنك إخبار التذييل بأن يمتد من العمود الأول إلى العمود الأخير باستخدام أمر واحد. يصبح الكود الخاص بك نظيفًا وسهل القراءة.
نصيحتي:
• استخدم Flexbox للمحاذاة البسيطة في الرؤوس (headers) أو الأزرار.
• استخدم Grid لتخطيطات الصفحات الرئيسية والمعارض المعقدة.
• توقف عن تداخل الحاويات فقط لإصلاح مشكلة في التخطيط.
• استخدم وحدة fr لتوزيع المساحة بسهولة.
جرب هذا اليوم. خذ مكونًا قديمًا قمت ببنائه باستخدام Flexbox، وأعد كتابته باستخدام CSS Grid. سترى أن الكود الخاص بك أصبح أقصر وتخطيطاتك أصبحت أقوى.