إمتى أستخدم CSS Grid بدل Flexbox؟

ابدأ بعلاقة العناصر

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

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

مثال شبكة مع صف داخل كل بطاقة

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

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

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

RTL وترتيب القراءة

اختبر اتجاه الصفحة الحقيقي والخصائص المنطقية للمسافات. لا تعكس ترتيب DOM لمجرد جعل الشكل أقرب إلى لقطة التصميم. قد يؤدي ترتيب بصري مختلف عن المصدر إلى تجربة مربكة عند استخدام لوحة المفاتيح أو قارئ الشاشة. قارن ترتيب التنقل المرئي بترتيب التركيز بعد أي استخدام لخصائص إعادة الترتيب أو تحديد مناطق الشبكة.

1. جرّب عرضًا صغيرًا 320 بكسل وعرضًا متوسطًا وآخر واسعًا.
2. ضاعف طول عنوان بطاقة واجعل وصف بطاقة أخرى فارغًا.
3. اختبر تكبير النص وحالة رابط طويل أو جزء كود لا يلتف بسهولة.
4. انتقل بين الروابط بالكيبورد، وتأكد أن التركيز لا يقفز بين أماكن متباعدة بصورة غير متوقعة.

قرار قابل للصيانة

إذا كنت تضيف قواعد كثيرة فقط لمحاذاة أعمدة بين أسطر Flexbox، فأعد النظر في Grid. وإذا كنت تبني شبكة معقدة لتوزيع ثلاثة أزرار في سطر، فقد يكون Flexbox أوضح. لا تستخدم التحويل بين التقنيتين كحل لمشكلة ناتجة عن min-width أو محتوى لا يلتف؛ افحص مصدر التمدد أولًا.

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