freeCodeCamp/guide/arabic/certifications/responsive-web-design/css-grid/limit-item-size-using-the-m.../index.md

1.5 KiB

title localeTitle
Limit Item Size Using the minmax Function الحد الأقصى لحجم العنصر باستخدام الدالة minmax

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

في ما يلي مثال على ما يبدو مثل استخدام طريقة ما قبل وبعد :

قبل

grid-template-columns: repeat(3, 1fr);

بعد

grid-template-columns: repeat(3, minmax(50px, 2fr));


يمكنك أيضًا التحقق من هذا القلم المضمن على Codepen للاطلاع على المثال في الإجراء ، والذي يمكنك تغيير حجمه لعرض النتائج:

انظر القلم الحد البند-الحجم-باستخدام- minmax -function بواسطة skywardcode ( skywardcode ) على CodePen .

مصادر

شبكة مطوري موزيلا