وظيفة CSS repeat()

التعريف والاستخدام

CSS repeat() الوظيفة تستخدم لتكرار مجموعة الأعمدة أو الصفوف في الشبكة.

إذا كان لديك العديد من الصفوف أو الأعمدة في شبكتك، فإن هذه الوظيفة مفيدة جدًا. من خلال هذه الوظيفة، يمكنك إنشاء "نمط تكرار" للاستخدام.

هذه الوظيفة تتوافق مع grid-template-columns الخصائص و grid-template-rows استخدام الخصائص معًا.

مثال

مثال 1

استخدام repeat() تكرار مجموعة الأعمدة في الشبكة:

#container {
  display: grid;
  grid-template-columns: repeat(2, 60px 1fr);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

تجربة شخصية

مثال 2

استخدام repeat() تكرار مجموعة الأعمدة في الشبكة:

#container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

تجربة شخصية

النحو CSS

repeat(repeat-count, tracks)
القيمة الوصف
repeat-counts

مطلوب. تحديد عدد التكرارات التي يجب تكرار الأعمدة أو الصفوف.

يمكن أن يكون 1 أو أكبر من الصفر، أو الكلمات المفتاحية auto-fill أو auto-fit (ستكرر الأعمدة أو الصفوف حسب الحاجة لملء محتوى الصندوق الشبكي).
tracks

مطلوب. تحديد السلسلة المتكررة للصفوف أو الأعمدة. يمكن استخدام القيم التالية:

  • قيم طول (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • الخط الاسمي

تفاصيل التقنية

الإصدار: مodule CSS Grid Layout Level 2

دعم المتصفح

الرقم في الجدول يظهر إصدار المتصفح الذي يدعم هذه الوظيفة تمامًا.

كروم إدج فايرفوكس سفاري أوبرا
57 16 76 10.1 44

الصفحات ذات الصلة

المرجع:خصائص grid-template-columns CSS

المرجع:خصائص grid-template-rows CSS