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)
|