CSS Academy · درس

‏Auto-fit وAuto-fill مع minmax

أنشئ عدد الأعمدة المتجاوب تلقائيًا باستخدام auto-fit وauto-fill مع minmax()

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

الشبكة المتجاوبة تلقائيًا

أقوى أنماط CSS Grid: شبكة متجاوبة بالكامل تضبط عدد الأعمدة تلقائيًا دون أي استعلامات وسائط، باستخدام auto-fit أو auto-fill مع minmax().

auto-fill

تملأ auto-fill الصف بأكبر عدد ممكن من الأعمدة التي يمكن أن تتسع بالحجم الأدنى المحدد. وتُحافَظ على الأعمدة الفارغة كمسارات فارغة في النهاية.

  <div class="grid">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

auto-fit

تعمل auto-fit مثل auto-fill، لكنها تطوي المسارات الفارغة إلى عرض صفري. وتتمدد العناصر الموجودة لملء المساحة المتبقية.

  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
  </div>

الفرق بين auto-fill وauto-fit

لا يظهر الفرق إلا عندما يكون عدد العناصر أقل من العدد اللازم لملء الصف:

auto-fill: تبقى مسارات الأعمدة الفارغة، ولا تتمدد العناصر لملء المساحة
auto-fit: تُطوى المسارات الفارغة، وتتمدد العناصر لملء العرض المتاح بالكامل

‏auto-fit مع minmax()

نمط الشبكة المتجاوبة الشهير — تكون العناصر بعرض لا يقل عن 250px، وتتمدد لملء المساحة، وتلتف تلقائيًا إلى صفوف جديدة:

  <div class="responsive-grid">
    <div>Card 1</div><div>Card 2</div><div>Card 3</div>
  </div>

شرح minmax()

تحدد minmax(min, max) نطاق حجم المسار. فلا يكون المسار أصغر من min ولا أكبر من max. وعند دمجها مع fr، تنشئ مسارات مرنة يحدّها حد أدنى.

  <div class="track"><div>Flexible track</div></div>

auto-fill مع minmax للعناصر الثابتة

عندما تريدون أن تكون العناصر بحجم ثابت مع السماح بوجود مساحة فارغة في النهاية:

  <div class="icon-grid">
    <div>&#128295;</div><div>&#9881;</div><div>&#128296;</div>
  </div>

التجاوب دون استعلامات الوسائط

هذه هي الفائدة الأساسية: تتكيف repeat(auto-fit, minmax(280px, 1fr)) تلقائيًا، بدءًا من عمود واحد على الهاتف ووصولًا إلى أكبر عدد من الأعمدة التي تتسع لها الشاشات الأكبر:

  <div class="cards">
    <div>Card A</div><div>Card B</div>
  </div>

استخدام min() مع minmax بأمان أكبر

تجنبوا مشكلات التخطيط في الحاويات الصغيرة باستخدام min(100%, 280px) كحد أدنى بدلًا من قيمة بكسل ثابتة:

  <div class="grid"><div>Item</div></div>

استخدام auto-fill لمحاذاة شبيهة بـ Masonry

مع auto-fill، تحافظ المسارات الفارغة في النهاية على المحاذاة عندما لا يكون عدد العناصر من مضاعفات عدد الأعمدة، وهذا مفيد لإنشاء شبكات متناسقة.

الحجم الجوهري في Grid مقابل Flexbox

يشبه flex-wrap + flex: 1 1 250px ذلك، لكنه لا يضمن تساوي عروض الأعمدة؛ فقد تتمدد العناصر بشكل غير متساوٍ. أما Grid مع minmax فتضمن مسارات متطابقة تمامًا.

اختبار سريع

أي قيمة من قيم Grid تنشئ أعمدة متجاوبة دون استعلامات وسائط، عبر طي المسارات الفارغة كي تملأ العناصر المساحة المتاحة؟

مراجعة

يُعد repeat(auto-fit, minmax(250px, 1fr)) أقوى نمط منفرد لإنشاء شبكة متجاوبة، ولا يحتاج إلى أي استعلامات وسائط. تطوي auto-fit المسارات الفارغة كي تملأ العناصر الصف. وتحافظ auto-fill على المسارات الفارغة لتحقيق محاذاة متناسقة. واحرصوا دائمًا على دمجها مع gap لإنشاء الفواصل.

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

هل درس «‏Auto-fit وAuto-fill مع minmax» مجاني؟

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

ماذا ستتعلم في «‏Auto-fit وAuto-fill مع minmax»؟

أنشئ عدد الأعمدة المتجاوب تلقائيًا باستخدام auto-fit وauto-fill مع minmax() تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «‏Auto-fit وAuto-fill مع minmax»؟

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

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

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

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

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