وظيفة fit-content() في CSS

التعريف والاستخدام

CSS fit-content() يُسمح للوظيفة أن تغير حجم العنصر بناءً على المحتوى. هذا الشكل يشبه العنصر الذي يستخدم المساحة المتاحة، ولكن لا يزيد أبدًا عن حجم المحتوى الأكبر.

مثال

استخدام fit-content() تغيير حجم الأعمدة في الشبكة:

#container {
  display: grid;
  grid-template-columns: fit-content(250px) fit-content(250px) auto;
  grid-gap: 7px;
  box-sizing: border-box;
  height: 150px;
  width: 100%;
  background-color: green;
  padding: 7px;
}

تجربة شخصية

نحو اللغة CSS

fit-content(length|percentage)
القيمة الوصف
length تحديد قيمة الطول المطلق للحجم.
percentage تحديد حجم بنسبة مئوية من المساحة المتاحة.

تفاصيل التقنية

الإصدار: CSS4

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الوظيفة تمامًا.

Chrome Edge Firefox Safari Opera
57 16 52 10.1 44

الصفحات ذات الصلة

المرجع:خصائص الأعمدة التلقائية للشبكة CSS grid-auto-columns

المرجع:خصائص الصفوف التلقائية للشبكة CSS grid-auto-rows

المرجع:خصائص grid-template-columns CSS

المرجع:خصائص grid-template-rows CSS