CSS Academy · درس

‏Grid الضمني وGrid-Auto-Flow

افهم كيفية تعامل CSS Grid مع العناصر التي تتجاوز المسارات الصريحة، باستخدام الصفوف والأعمدة الضمنية

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

الشبكة الصريحة مقابل الشبكة الضمنية

تُعرَّف الشبكة الصريحة باستخدام grid-template-columns وgrid-template-rows. وعندما تتجاوز العناصر هذه المسارات المحددة، ينشئ المتصفح مسارات ضمنية تلقائيًا.

grid-auto-rows

تحدد حجم مسارات الصفوف التي أُنشئت ضمنيًا. ومن دونها، تُضبط أحجام الصفوف الضمنية لتلائم محتواها (auto).

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

grid-auto-rows مع minmax

اجعلوا الصفوف الضمنية بارتفاع لا يقل عن قيمة معينة، مع السماح لها بالتمدد:

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

grid-auto-columns

تحدد أحجام مسارات الأعمدة الضمنية عندما توضع العناصر خارج نطاق الأعمدة الصريحة:

  <div class="timeline">
    <div>Event 1</div><div>Event 2</div>
  </div>

grid-auto-flow

تتحكم في كيفية وضع خوارزمية التموضع التلقائي للعناصر:

row (الافتراضي) — تضع العناصر في صفوف، وتضيف صفوفًا جديدة عند الحاجة
column — تضع العناصر في أعمدة، وتضيف أعمدة جديدة
row dense — تملأ الفجوات بقوة عبر الرجوع إلى العناصر السابقة
column dense — تملأ الفجوات بكثافة في اتجاه الأعمدة

grid-auto-flow: dense

تجعل dense الخوارزمية تحاول ملء الفجوات التي تتركها العناصر الممتدة على مساحات كبيرة. وقد يؤدي ذلك إلى ظهور العناصر بترتيب مختلف.

  <div class="masonry">
    <div class="featured">Featured</div><div>2</div><div>3</div><div>4</div>
  </div>

نمط التموضع التلقائي في الأعمدة

شريط بطاقات أفقي قابل للتمرير، تنمو فيه الأعمدة عند الحاجة:

  <div class="strip">
    <div>Card 1</div><div>Card 2</div><div>Card 3</div>
  </div>

التعبئة الكثيفة لمعرض الصور

معرض صور بأحجام مختلفة يملأ الفجوات:

  <div class="gallery">
    <div class="wide">Wide</div>
    <div class="tall">Tall</div>
    <div>3</div><div>4</div>
  </div>

الشبكة الضمنية والمناطق المسماة

تنطبق المناطق المسماة على الشبكة الصريحة فقط. ولا يمكن للعناصر الموضوعة في الشبكة الضمنية استخدام التموضع بواسطة المناطق المسماة مباشرةً؛ بل تتطلب استخدام أرقام الخطوط أو الامتداد.

تصوير الشبكة الضمنية

يعرض تراكب التخطيط في Chrome DevTools خطوط الشبكة الصريحة (المتصلّة) والضمنية (المتقطّعة) معًا. ويساعدكم ذلك على فهم مواضع استقرار العناصر الموضوعة تلقائيًا.

التحكم في الحجم الضمني لكل عنصر

تحتاج العناصر الممتدة على عدة صفوف في الشبكة الضمنية إلى grid-auto-rows لضبط أحجامها بشكل صحيح. ومن دونه، تُضبط أحجام الصفوف الضمنية وفقًا للمحتوى، مما قد ينشئ تخطيطات غير متساوية.

اختبار سريع

ماذا يفعل grid-auto-flow: row dense؟

مراجعة

تمد الشبكة الضمنية الشبكة الصريحة بمسارات تُنشأ تلقائيًا. وتتحكم grid-auto-rows/columns في أحجامها، بينما تجعلها minmax() مرنة. وتحدد grid-auto-flow اتجاه التموضع. وتملأ التعبئة باستخدام dense الفجوات بقوة؛ وهي مفيدة لتخطيطات شبيهة بـ Masonry، لكنها قد تخل بالترتيب المرئي.

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

هل درس «‏Grid الضمني وGrid-Auto-Flow» مجاني؟

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

ماذا ستتعلم في «‏Grid الضمني وGrid-Auto-Flow»؟

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

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

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

كم من الوقت يستغرق درس «‏Grid الضمني وGrid-Auto-Flow»؟

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

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

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

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

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