---
id: 5a94fe6269fb03452672e462
title: Create Flexible Layouts Using auto-fit
challengeType: 0
videoUrl: ''
localeTitle: إنشاء تصميمات مرنة باستخدام الملاءمة التلقائية
---
## Description
تعمل auto-fit
تقريبًا تمامًا auto-fill
. والفرق الوحيد هو أنه عندما يتجاوز حجم الحاوية حجم جميع العناصر مجتمعة ، auto-fill
تحافظ على إدخال صفوف أو أعمدة فارغة وتدفع عناصرك إلى الجانب ، بينما auto-fill
auto-fit
تصغير تلك الصفوف أو الأعمدة الفارغة وتمديد العناصر الخاصة بك إلى تناسب حجم الحاوية. ملحوظة
إذا لم تستطع الحاوية استيعاب جميع العناصر في صف واحد ، فسينقلها إلى آخر جديد.
## Instructions
في الشبكة الثانية ، استخدم auto-fit
مع repeat
لملء الشبكة بالأعمدة التي يبلغ عرضها 60px
1fr
كحد أدنى والحد الأقصى 1fr
. ثم قم بتغيير حجم المعاينة لمعرفة الفرق.
## Tests
```yml
tests:
- text: container2
يجب أن يكون من الدرجة على grid-template-columns
الملكية مع repeat
و auto-fit
من شأنها أن تملأ الشبكة مع الأعمدة التي لها الحد الأدنى من عرض 60px
والحد الأقصى من 1fr
.
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), "container2
class should have a grid-template-columns
property with repeat
and auto-fit
that will fill the grid with columns that have a minimum width of 60px
and maximum of 1fr
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```