انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 105
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
2
الأمثلة
6
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,870
محتوى الدرس
في هذا الدرس 2تصفّح المواضيع

دالة 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.

HTML 
repeat(iterator,values);

CSS repeat with values

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

HTML 
repeat(4,auto);

CSS track repeat values

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

HTML 
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.

HTML 
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.

HTML 
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.

جرّب بنفسك
HTML 
.grid-container
{
  display: grid;
  grid-template-columns:repeat(4,auto);
  background-color: #2196F3;
  padding: 10px;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…