68. دالة repeat() (الكفاءة)

بالنسبة للتخطيطات التي تحتوي على العديد من المسارات ذات الحجم المتماثل، فإن كتابة عرض كل عمود أمر مكرر. تبسط دالة repeat() ذلك.

النحو (Syntax)

repeat(<عدد_المرات>, <حجم_المسار>);

أمثلة

1. تكرار بسيط

إذا كنت بحاجة إلى 6 أعمدة، كل منها يأخذ كسراً واحداً من المساحة:

css /* الطريقة المفصلة: grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; */ .grid-6-columns { grid-template-columns: repeat(6, 1fr); }

2. تعريفات مختلطة

يمكنك استخدام repeat() جنباً إلى جنب مع الإعلانات الصريحة.

css .grid-mixed { /* شريط جانبي 50 بكسل، أربعة أعمدة 1fr، شريط جانبي 50 بكسل */ grid-template-columns: 50px repeat(4, 1fr) 50px; }

التحجيم التلقائي لمسارات الشبكة

غالباً ما تستخدم repeat() مع minmax() (الدرس 73) و auto-fit / auto-fill (الدرس 84) لإنشاء شبكات ديناميكية ومتجاوبة حقاً.