شبكة البطاقات الجيدة تستوعب شاشة الهاتف والشاشة الكبيرة دون فرض عدد أعمدة ثابت في كل الظروف. يتيح CSS Grid توزيع المساحات على صفوف وأعمدة، مع فصل بنية المحتوى عن تفاصيل موضعه البصري.
الفكرة الأساسية
ابدأ بأصغر عرض مقبول للبطاقة بدل حفظ قائمة طويلة من مقاسات الأجهزة. تسمح minmax بتحديد حدود المساحة، بينما تساعد الوحدات المرنة على توزيع الباقي. يجب أن تبقى العناوين الطويلة والصور المختلفة جزءًا من تجربة الاختبار.
خطوات عملية
- حدّد أقل عرض يحافظ على قراءة عنوان البطاقة وأزرارها بوضوح.
- استخدم أعمدة مرنة وفجوات ثابتة نسبيًا، ثم راقب الالتفاف عند تضييق الحاوية.
- اختبر بطاقة بلا صورة وأخرى بعنوان عربي طويل لتكتشف مشاكل الارتفاع والفيض.
مثال تطبيقي
يمكن لدليل خدمات أن يعرض عمودًا واحدًا عندما تضيق المساحة ثم يزيد الأعمدة تلقائيًا. حافظ على ترتيب العناصر في المصدر مطابقًا لترتيب القراءة، حتى لو أمكن إعادة توزيعها بصريًا.
خطأ شائع ينبغي تجنبه
تغيير ترتيب البطاقات باستخدام CSS لا يغيّر بالضرورة ترتيب لوحة المفاتيح. لا تجعل التنسيق المرئي مختلفًا جذريًا عن تسلسل المستند.
مثال تقني مبسّط
المقتطف التالي يوضح الفكرة، ويحتاج إلى تكييف مع بنية مشروعك ومساراته والتحقق المناسب قبل استخدامه.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 16px;
}للتوسع في الموضوع
صور توضيحية: الغلاف من Unsplash، الصورة الداخلية من Unsplash. ترخيص الاستخدام.
