CSS Academy · درس

وحدة fr ودالة Repeat

استخدم الوحدة الكسرية fr والدالة repeat() لإنشاء مسارات شبكة مرنة.

وحدة fr ودالة Repeat درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما وحدة fr؟

تُستخدم وحدة fr (الكسر) حصريًا في CSS Grid. وهي تمثل جزءًا من المساحة الحرة المتبقية في حاوية الشبكة بعد تحديد أحجام جميع المسارات غير المرنة.

مثال بسيط على fr

عمودان متساويان، يحصل كل منهما على نصف المساحة المتاحة:

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Column 1 (1fr)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Column 2 (1fr)</div>
</div>

مسارات مختلطة

تُحسب مساحة fr بعد طرح المسارات الثابتة:

<div class="layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px sidebar</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>

كسور غير متساوية

تنشئ قيم fr مختلفة أعمدة متناسبة:

<div class="thirds" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">25% (1fr)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">50% (2fr)</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">25% (1fr)</div>
</div>

الدالة repeat()

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

<div class="grid" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
  <div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
</div>

repeat() مع مسارات مختلطة

يمكنك تكرار نمط من المسارات:

<div class="grid" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1fr</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2fr</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr</div>
  <div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">2fr</div>
  <div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">1fr</div>
  <div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">2fr</div>
</div>

auto-fill

ينشئ repeat(auto-fill, ...) أكبر عدد ممكن من الأعمدة التي تتسع لها الحاوية بالحجم المحدد. وتظل المسارات الفارغة محفوظة في النهاية.

<div class="grid" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">200px</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">200px</div>
</div>

auto-fit

يعمل repeat(auto-fit, ...) مثل auto-fill، لكنه يطوي المسارات الفارغة، مما يتيح للعناصر الموجودة التمدد لملء الحاوية.

<div class="grid" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">min 200px, grows</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">min 200px, grows</div>
</div>

minmax() في repeat

يحدد minmax(min, max) نطاقًا لحجم المسار. وعند دمجه مع auto-fit، ينشئ شبكة متجاوبة من دون استعلامات وسائط:

<div class="responsive-grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Card A</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Card B</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Card C</div>
</div>

fr مقابل النسبة المئوية

بخلاف النسب المئوية، تستبعد fr مساحة الفجوات تلقائيًا. يمنح 1fr 1fr مع فجوة مقدارها 24px عمودين متساويين من دون أي حسابات. أما الحساب المكافئ باستخدام النسب المئوية فهو calc(50% - 12px).

fr مع min-content وmax-content

يمكنك دمج fr مع تحديد الحجم المستند إلى المحتوى لإنشاء تخطيطات مختلطة:

<div class="grid" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Label</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Flexible content area</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Action</div>
</div>

تحقق سريع

ماذا ينشئ repeat(auto-fit, minmax(200px, 1fr))؟

مراجعة

توزّع وحدة fr مساحة الشبكة المتبقية بشكل نسبي. وتتجنب repeat() تكرار تعريفات المسارات. وينشئ النمط القوي repeat(auto-fit, minmax(250px, 1fr)) شبكات بطاقات متجاوبة بالكامل من دون الحاجة إلى استعلامات وسائط.

الأسئلة الشائعة

هل درس «وحدة fr ودالة Repeat» مجاني؟

نعم — نص درس «وحدة fr ودالة Repeat» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «وحدة fr ودالة Repeat»؟

استخدم الوحدة الكسرية fr والدالة repeat() لإنشاء مسارات شبكة مرنة. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «وحدة fr ودالة Repeat»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy