CSS

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

سوف تتعلم في هذا الدرس معلومات حول خاصية repeat في لغة CSS وطريقة كتابتها ومتي تستخدم وما هي المعطيات أو القيم التي تكتب بداخلها.

التاريخ

10 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1092

المواضيع

24
الشروحات chevron_left CSS Repeat Function chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> دالة repeat في لغة CSS
CSS repeat Function

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


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

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


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

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

القيمة الأولي هي 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;
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات