تستخدم دالة repeat في لغة CSS لعمل أجزاء متكررًه من القيم التي تكتب بداخل الخصائص مثل خاصية [grid-template-rows- grid-template-columns]، مما يمكننا من كتابة عدد كبير من الأعمدة أو الصفوف بدون كتابة قيم كثيرة.

لماذا تستخدم دالة repeat في لغة CSS:

لتكرار وإختصار 4 قيم مثلا [auto auto auto auto] يتم إختصارتها إلي repeat(4,repeat).

طريقة كتابة دالة دالة repeat في لغة CSS:

تكتب دالة repeat بداخل قيم خصائص [grid-template-rows- grid-template-columns].
تبدأ بكلمة repeat بحروف صغيرة.
يتم تمرير بداخلها قيميتين:

القيمة الأولي هي iterator وهو رقم صحيح لعدد مرات التكرار.

القيمة الثانية هي قيمة الخصائص مثلاً repeat(4,auto) أو repeat(4,200px).

تستخدم دالة repeat في لغة CSS مع خاصيتين وهم:

grid-template-columns.
grid-template-rows.

CSS repeat syntax

طريقة كتابة دالة repeat في لغة CSS.

repeat(iterator,values);

CSS repeat with values

طريقة كتابة دالة repeat مع قيمة auto وسوف تكرر 4 مرات في هذا المثال في لغة CSS.

repeat(4,auto);

CSS track repeat values

طريقة كتابة دالة repeat في لغة CSS.

repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])

CSS auto repeat values

طريقة كتابة دالة repeat مع القيم التلقائية في لغة CSS.

repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])

CSS fixed repeat values

طريقة كتابة دالة repeat مع القيم الثابتة في لغة CSS.

repeat(4, 250px)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])

</> CSS auto repeat values
قيمة auto تتكرر بواسطة دالة repeat في لغة CSS

تستخدم دالة repeat مع خاصية grid-template-columns لعمل مجموعة أعمده بشكل تلقائي في لغة CSS تكون لقيمة الأولي هي عدد مرات التكرار والثانية قيمة auto.

جربها بنفسك

.grid-container
{
  display: grid;
  grid-template-columns:repeat(4,auto);
  background-color: #2196F3;
  padding: 10px;
}

جربها بنفسك

معلومات تهمك

لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

CSS Repeat Function
دالة repeat في لغة CSS

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Repeat Function CSS