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