---
title: Create Flexible Layouts Using auto-fill
localeTitle: إنشاء تنسيقات مرنة باستخدام الملء التلقائي
---
## إنشاء تنسيقات مرنة باستخدام الملء التلقائي

سيوضح هذا التحدي التحدي السابق عن طريق إضافة قيمة **الملء التلقائي** إلى وظيفة _التكرار_ . سيؤدي ذلك إلى زيادة عدد div على أساس حجم إطار العرض بدلاً من قيمة العمود المحددة مسبقًا. في القسم **قبل** أدناه، يتم تحديد قيمة **الشبكة قالب عمود** "3".

_ضع في اعتبارك أن مقتطفات الشفرة التالية ليست سوى أمثلة وليس التجميع الدقيق من المنهاج freeCodeCamp._

### قبل

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

### بعد

 `    grid-template-columns: repeat(auto-fill, minmax(50px, 2fr)); 
` 

* * *

### مصادر

يمكنك الرجوع إلى جزء " **بناء الجملة"** من الصفحة التالية لمشاهدة قيمة **الملء التلقائي** : [شبكة مطوري موزيلا](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat)