repeat() وminmax() في Grid
أنشئ مسارات Grid متعددة وحدّد نطاقات أحجام مرنة باستخدام repeat() وminmax()
repeat() وminmax() في Grid درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
استخدام repeat() في سياق Grid
repeat(count, track-size) هي دالة في CSS Grid تنشئ عدة تعريفات للمسارات من دون تكرارها. وتعمل داخل grid-template-columns وgrid-template-rows.
استخدام repeat() مع عدد ثابت
أنشئ أربعة أعمدة متساوية:
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>استخدام repeat() مع نمط
كرّر نمطًا من المسارات:
<div class="striped-grid">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</div>استخدام minmax() داخل المسارات
تعرّف minmax(min, max) نطاق حجم المسار:
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>استخدام auto-fit مع minmax()
الوصفة المناسبة لشبكة متجاوبة:
<div class="cards">
<div>Card A</div><div>Card B</div>
</div>minmax(min-content, max-content)
يمكن أن تستخدم أحجام المسارات الكلمات المفتاحية للأحجام الجوهرية:
<div class="labels">
<div>Label</div><div>Value</div>
</div>استخدام minmax() في الصفوف
استخدم minmax() للصفوف للسماح بارتفاع تحدده المحتويات مع حد أدنى:
<div class="gallery"><div>1</div><div>2</div></div>استخدام fit-content() للأعمدة
تجعل fit-content(max) المسار بعرض محتواه حتى حد أقصى محدد — مثل max-content لكن مع سقف:
<div class="layout"><div>Sidebar</div><div>Main</div></div>الدمج بين repeat() والخطوط المسماة
كرّر الخطوط المسماة للوصول إلى الأعمدة الفردية باستخدام أسمائها:
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>استخدام auto-fill مع minmax للعناصر الثابتة
عندما يجب ألا تتمدد العناصر إلى ما يتجاوز حجمها الطبيعي:
<div class="gallery">
<div>1</div><div>2</div><div>3</div>
</div>وحدات fr مقابل النسب المئوية في Grid
بخلاف النسب المئوية، تراعي وحدات fr مساحة الفجوات تلقائيًا. ويعطي repeat(3, 1fr) مع gap: 24px ثلاثة أعمدة متساوية فعلًا. أما النسب المئوية فتحتاج إلى calc() لطرح مساحة الفجوة.
تحقّق سريعًا
ما الذي يعرّفه repeat(3, minmax(100px, 1fr))؟
مراجعة
تنشئ repeat(count, track) عدة مسارات من دون تكرار. وتحدّد minmax(min, max) نطاقات مرنة لأحجام المسارات. ويُعد النمط repeat(auto-fit, minmax(280px, 1fr)) أقوى أنماط الشبكات المتجاوبة — من دون أي استعلامات وسائط، ومع أعمدة متجاوبة تلقائيًا. استخدم fit-content(max) لأعمدة الأشرطة الجانبية التي تراعي المحتوى.
الأسئلة الشائعة
هل درس «repeat() وminmax() في Grid» مجاني؟
نعم — نص درس «repeat() وminmax() في Grid» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «repeat() وminmax() في Grid»؟
أنشئ مسارات Grid متعددة وحدّد نطاقات أحجام مرنة باستخدام repeat() وminmax() تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «repeat() وminmax() في Grid»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- calc() للحسابات الديناميكية
- min() وmax() وclamp() للقيم المرنة
- repeat() وminmax() في Grid
- color-mix() وصياغة الألوان النسبية