عمود 1fr في CSS Grid: لماذا يوسع النص الطويل التخطيط؟

الخلاصة السريعة

• 1fr منفردة تعني حدا أدنى تلقائيا للمسار. [1]
• خفض الحد إلى صفر لم يمنع خروج نص تجربتنا.
• مع anywhere احتوت الحالتان النص في ثلاثة أسطر.
• المساحة الباقية في إعدادنا تساوي 252 بكسلا.
• قارن عرض المسار وامتداد المحتوى كلّا على حدة.

مساحة واحدة وأربع حالات

أنشأنا شبكة بعرض 360 بكسلا، بعمود جانبي عرضه 96 وفجوة 12. كتبنا REPORT0123456789 خمس مرات متصلة، بخط monospace وحجم 16 وارتفاع سطر 20. لم نضف حشوا أو حدودا، وثبتنا اتجاه التجربة من اليسار إلى اليمين.

سمينا الحالات A وB وC وD كي نبقي المقارنة واضحة. في A استخدمنا 1fr والتفاف normal؛ في B غيرنا المسار فقط إلى minmax(0,1fr). في C أبقينا هذا المسار وبدلنا الالتفاف إلى anywhere؛ وفي D أعدنا 1fr مع إبقاء anywhere.

شغلنا المثال في Edge 155.0.4283.45. كانت white-space:normal في الحالات الأربع، والنص نفسه بلا مسافات. قسنا عرض العمود من التخطيط المحسوب، وعرض الحاوية وامتداد محتواها، وارتفاع كتلة النص؛ لم نعتمد على مظهر لقطة الشاشة وحده.

لماذا يختلف الحد الأدنى عن الكسر؟

تعني 1fr خارج minmax الصيغة minmax(auto,1fr). الحد auto يتأثر بأحجام العناصر الدنيا، ولا يساوي min-content دائما؛ وminmax(0,1fr) تحدده بالصفر. [1]

تتيح anywhere كسر سلسلة لا تجد موضع كسر مقبولا، وتدخل فرص الكسر هذه في حساب min-content. لذلك قد يؤثر اختيار الالتفاف أيضا في الحجم الأدنى المحسوب. [2]

هذه القاعدتان تفسران ما نفحصه، لكن الأبعاد التالية نتائج إعدادنا المحدد. أبقينا الخط والمحتوى ثابتين، وقارنا تغييرا واحدا بين A وB، ثم بين B وC. أما D فاختبرت الالتفاف مع المسار الأول، بدلا من افتراض أنها ستفشل.

العمود ضاق، لكن النص بقي خارجا

في A بلغ عرض المسار الثاني 703.75 بكسلا، وبلغ امتداد محتوى الحاوية 812. وفي B صار المسار 252، بينما بقي الامتداد 812. كان التغير في العرض المحسوب كبيرا، لكن النص لم ينقسم: بقي ارتفاعه 20 في الحالتين.

في C سجلنا مسارا بعرض 252 وامتدادا كليا 360، وارتفع النص إلى 60. وتكررت هذه القراءات في D. النتيجة العملية في اختبارنا أن التفاف النص حل الامتداد في الحالتين، مع اختلاف تعريف المسار بينهما.

حسبنا المساحة المتاحة مستقلا: 360 − 96 − 12 = 252. ثم قارناها بالقراءة الفعلية. لا تعني قيمة 703.75 قاعدة ثابتة للنصوص؛ هي قياس لسلسلتنا وخطنا وبيئتنا. تغيير الكلمات أو الخط يحتاج إلى سجل جديد.

أعد الإعداد ثم غيّر خاصية واحدة

ضع CSS الآتي في صفحة اختبار فارغة، ثم نفذ شيفرة إنشاء العنصر. هذه هي حالة A. لإنشاء B استبدل القيمة الأخيرة للمسار بـ minmax(0,1fr)، ثم اختبر C بتغيير normal في overflow-wrap إلى anywhere. أنشئ نسخة جديدة لكل قياس.

للحالة D ابدأ من A وغير الالتفاف فقط. سجل اسم الحالة قبل نسخ الأرقام، واحتفظ بالنص والخط والحجم والفجوة كما هي. قارنا كذلك عرض العنصر بقياس مستقل لحدوده، وفحصنا ارتفاع الأسطر؛ اتفقت القراءتان ضمن اختبارنا.

.grid {
  display: grid;
  width: 360px;
  grid-template-columns:
    96px 1fr;
  gap: 12px;
  font: 16px/20px monospace;
  direction: ltr;
}
.text {
  white-space: normal;
  overflow-wrap: normal;
}

const grid =
  document.createElement("div");
grid.className="grid";
grid.innerHTML =
  '<div>side</div><div></div>';
const text=grid.lastElementChild;
text.className="text";
text.textContent =
  "REPORT0123456789".repeat(5);
document.body.append(grid);

[1] [2]

ماذا تسجل قبل اعتماد النتيجة؟

اكتب في سجل صغير ثلاثة أعمدة: عرض المسار، امتداد الحاوية، وارتفاع النص. في B كانت الخانة الأولى وحدها مطمئنة؛ الخانتان الأخريان كشفتا أن المشكلة التي أردنا حلها ما زالت ظاهرة. وفي C وD تغيرت القياسات الثلاثة بصورة متسقة.

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

المراجع

1. MDN — grid-template-columns
   https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns
2. MDN — overflow-wrap
   https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow-wrap