CSS Academy · درس

‏Subgrid لمحاذاة المحتوى المتداخل

استخدم subgrid لمحاذاة عناصر Grid المتداخلة مع مسارات Grid الأب

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

مشكلة Subgrid

تحدٍّ شائع: لديكم شبكة من البطاقات، وتحتوي كل بطاقة على رأس ومتن وتذييل. ومن دون Subgrid، لا يمكن للعناصر الموجودة في البطاقات المختلفة أن تصطف على خطوط الأساس نفسها، لأن كل بطاقة تُعد تخطيطًا مستقلًا بذاته.

ما هي Subgrid؟

تُعد subgrid قيمةً لـ grid-template-columns أو grid-template-rows، وتتيح لشبكة متداخلة أن ترث تعريفات مسارات الشبكة الأصلية وتشارك فيها.

grid-template-rows: subgrid

يمكن لعنصر شبكة يكون أيضًا حاوية شبكة استخدام subgrid لمحاذاة عناصره الفرعية مع مسارات الشبكة الأصلية:

  <div class="card-grid">
    <div class="card">
      <div class="card-header">Header</div>
      <div class="card-body">Body</div>
      <div class="card-footer">Footer</div>
    </div>
  </div>

grid-template-columns: subgrid

وبالمثل، يتيح استخدام subgrid للأعمدة محاذاة العناصر المتداخلة مع مسارات أعمدة الشبكة الأصلية، وهو مفيد لمحاذاة أزواج التسمية والقيمة أو حقول النماذج عبر أعمدة البطاقات.

Subgrid مقابل align-content

من دون subgrid، يمكنكم محاذاة المحتوى جزئيًا باستخدام align-content أو الارتفاعات الثابتة، لكن هذا الحل هش. تتيح subgrid محاذاة حقيقية تعتمد على الارتفاعات الفعلية للمحتوى.

Subgrid لمحاذاة النماذج

محاذاة أزواج التسمية وحقل الإدخال عبر عدة أعمدة في النموذج:

  <div class="form-grid">
    <div class="form-section">
      <label>Name</label><input placeholder="Name" />
      <label>Email</label><input placeholder="Email" />
    </div>
  </div>

تمتد Subgrid عبر الصفوف والأعمدة

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

  <div class="layout"><div class="feature">Feature spans grid</div></div>

المناطق المُسمّاة مع Subgrid

عندما ترث شبكة فرعية مسارات مُسمّاة من الشبكة الأصلية، تصبح تلك الأسماء متاحة لتحديد المواضع داخل حاوية الشبكة الفرعية.

وراثة الفجوات

ترث الشبكات الفرعية قيم gap في الشبكة الأصلية افتراضيًا. وتشارك الشبكة المتداخلة في نظام الفواصل نفسه.

ملاحظة حول دعم المتصفحات

تتوفر Subgrid في Firefox منذ عام 2019، وأضاف Chrome دعمها في عام 2023. وتدعمها الآن جميع المتصفحات الحديثة. تحققوا من الدعم المتاح لجمهوركم المستهدف قبل استخدامها في بيئة الإنتاج.

التحسين التدريجي باستخدام Subgrid

وفّروا حلًا بديلًا للمتصفحات الأقدم باستخدام الارتفاعات الثابتة أو محاذاة Flexbox قبل إضافة subgrid كتحسين:

  <div class="card-grid"><div class="card">Card content</div></div>

تحقق سريع

ماذا يفعل grid-template-rows: subgrid عند تطبيقه على عنصر شبكة؟

مراجعة

تحل Subgrid مشكلة محاذاة المحتوى المتداخل في الشبكات، مثل شبكات البطاقات التي تحتاج فيها العناصر الموجودة في بطاقات منفصلة إلى المحاذاة مع خط الأساس نفسه. استخدموا grid-template-rows: subgrid مع عناصر الشبكة التي تمتد عبر عدة صفوف، وgrid-template-columns: subgrid للمحتوى المتداخل المحاذى حسب الأعمدة. وأصبح دعمها شاملًا في المتصفحات الحديثة.

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

هل درس «‏Subgrid لمحاذاة المحتوى المتداخل» مجاني؟

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

ماذا ستتعلم في «‏Subgrid لمحاذاة المحتوى المتداخل»؟

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

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

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

كم من الوقت يستغرق درس «‏Subgrid لمحاذاة المحتوى المتداخل»؟

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

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

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

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

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