25 lines
1.2 KiB
Markdown
25 lines
1.2 KiB
Markdown
---
|
||
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) |