fr (كسر) وحدة نسبية تُستخدم في CSS Grid. على سبيل المثال، 1fr 2fr يقسم المساحة بنسبة 1:2. وهي مفيدة جداً للتخطيطات المتجاوبة.
هل يمكنني بناء شبكة متجاوبة بلا استعلامات وسائط؟
نعم. فكتابة repeat(auto-fit, minmax(240px, 1fr)) تحدّد العرض الأدنى للعمود فقط وتترك الباقي للمتصفح: تُضاف الأعمدة كلما اتّسعت النافذة وتُحذف كلما ضاقت، فتغطّي من الهاتف إلى سطح المكتب دون نقطة توقّف واحدة. ولاحظ أن auto-fill يترك مسارات فارغة في المساحة المتبقّية بينما يمدّ auto-fit الأعمدة القائمة لملئها، ومن هنا يختلفان حين تقلّ العناصر.
كلمة طويلة توسّع أحد أعمدة الشبكة فيتفكّك التخطيط.
لأن الحجم الأدنى لعناصر الشبكة يكون auto افتراضياً، فترفض الانكماش دون محتواها؛ فرابط طويل أو كلمة غير قابلة للتقطيع يوسّعان العمود كلّه. وإسناد min-width: 0 إلى ذلك العنصر يتيح للشبكة تقليصه من جديد، وإضافة overflow-wrap: anywhere تجعل السلسلة الطويلة تلتف إلى سطر جديد. أما تعريف المسار بـ minmax(0, 1fr) بدل 1fr المجرّدة فيزيل السبب من أصله، ولذلك شاع كثيراً.
نصائح لاستخدام مولّد CSS Grid بفعالية
repeat(auto-fit, minmax(240px, 1fr)) يعيد ترتيب الأعمدة تلقائياً دون أي media query.
استخدم gap بدل الهوامش كي لا يبقى فراغ زائد في العمود الأخير.
في التخطيطات المعقّدة سمِّ المناطق عبر grid-template-areas ليبقى الكود مفهوماً لاحقاً.