الشبكة الفرعية لخدمة مقارنة الأسعار

تعد شبكة CSS محرّك تخطيط قويًا جدًا، ولكن لا يمكن استخدام مسارات الصفوف والأعمدة التي يتم إنشاؤها على شبكة رئيسية إلا لتحديد المواقع الثانوية المباشرة لحاوية الشبكة. أي عنصر يحدده المؤلف تم فقدان مناطق الشبكة والخطوط المسماة في أي عنصر آخر غير العنصر الثانوي المباشر. باستخدام subgrid، يمكن مشاركة حجم المسار، ويمكن مشاركة النماذج والأسماء مع شبكات مدمَجة. وتوضّح هذه المقالة آلية عمل هذه الأداة.

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

تظهر ثلاث بطاقات جنبًا إلى جنب، ولكل منها ثلاث أجزاء من المحتوى: العنوان والفقرة والرابط. لكل منها طول نص مختلف، مما يخلق بعض المحاذاة المحرجة في البطاقات أثناء جلوسها بجوار بعضها البعض.

بعد الشبكة الفرعية، يمكن محاذاة المحتوى متنوّع الحجم.

تظهر ثلاث بطاقات جنبًا إلى جنب، ولكل منها ثلاث أجزاء من المحتوى: العنوان والفقرة والرابط. لكل منها طول نص مختلف، لكن الشبكة الفرعية أصلحت المحاذاة من خلال السماح لأطول عنصر في كل عنصر محتوى بتعيين ارتفاع الصف، ما يؤدي إلى إصلاح أي مشاكل في المحاذاة.

التوافق مع المتصفح

  • 117
  • 117
  • 71
  • 16

المصدر

أساسيات الشبكة الفرعية

في ما يلي حالة استخدام بسيطة توضّح أساسيات لغة CSS subgrid. يتم تحديد الشبكة من خلال عمودَين باسم، الأول عرض 20ch والثاني هو "الباقي" من المساحة 1fr. أسماء الأعمدة غير مطلوبة لكنها رائعة لأغراض توضيحية وتعليمية.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

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

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}
لقطة شاشة لمجموعة أدوات مطوّري البرامج في شبكة CSS تعرض عمودَين جنبًا إلى جنب مع اسم في بداية سطر العمود
https://codepen.io/web-dot-dev/pen/NWezjXv

هذا كل شيء، تم تمرير أعمدة الشبكة الرئيسية بشكل فعال إلى مستوى الشبكة الفرعية. يمكن لهذه الشبكة الفرعية الآن تعيين عناصر فرعية لأي من هذين العمودين.

تحدّي: كرِّر العرض التوضيحي نفسه مع تنفيذ الإجراء على "grid-template-rows".

مشاركة شبكة "ماكرو" على مستوى الصفحة

غالبًا ما يعمل المصممون مع الشبكات المشتركة، ويرسمون خطوطًا على تصميم كامل، ومحاذاة أي عنصر يريدونه فيه. يمكن لمطوّري الويب الآن إجراء ذلك أيضًا! يمكن الآن تحقيق سير العمل الدقيق هذا، بالإضافة إلى العديد من الأمور الأخرى.

من شبكة الماكرو إلى التصميم النهائي. يتم إنشاء المناطق المحدّدة على الشبكة بشكل مُسبق، ثم يتم وضع المكوّنات اللاحقة حسب الحاجة.

يمكن أن يوفر تنفيذ سير عمل شبكة المصممين الأكثر شيوعًا إحصاءات ممتازة حول إمكانات subgrid وسير العمل والإمكانيات المتاحة.

إليك لقطة شاشة مأخوذة من "أدوات مطوري البرامج في Chrome" لشبكة ماكرو لتخطيط صفحة الأجهزة الجوّالة. الخطوط لها أسماء وهناك مناطق واضحة لوضع المكون.

لقطة شاشة من "أدوات مطوري البرامج في شبكة Chrome CSS" تعرض تنسيقًا شبكيًا بحجم الهاتف الجوّال حيث يتم تسمية الصفوف والأعمدة لتحديدها بسرعة: إمكانية الوصول الكامل، وحالة النظام، والتنقل الأساسي، والرأس الأساسي، والرئيسي، والتذييل، وإيماءات النظام.

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

.device {
    display: grid;
    grid-template-rows:
      [system-status] 3.5rem
      [primary-nav] 3rem
      [primary-header] 4rem
      [main] auto
      [footer] 4rem
      [system-gestures] 2rem
    ;
    grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}

بعض الأنماط الإضافية تعطي التصميم التالي.

نفس طريقة تراكب شبكة أدوات مطوّري البرامج في CSS كما في السابق، ولكن هذه المرة تظهر بعض واجهة المستخدم لنظام الجوّال وبعض الظلال وقليل من الألوان. يساعد في معرفة أين يتجه التصميم.

داخل هذا الأصل، توجد العديد من العناصر المتداخلة. يتطلب التصميم صورة بالعرض الكامل أسفل صفوف التنقل والرأس. يكون اسما أسطر العمودين في أقصى اليسار واليمين هما fullbleed-start وfullbleed-end. تتيح تسمية خطوط الشبكة بهذه الطريقة للأطفال إمكانية محاذاة كل منها في الوقت نفسه مع موضع اختصار fullbleed. الأمر سهل للغاية كما ستراه قريبًا.

لقطة شاشة مكبَّرة لتراكب الشبكة من "أدوات مطوري البرامج"، مع التركيز بشكل خاص على أسماء أعمدة البداية الكاملة والنهاية الكاملة.

باستخدام التنسيق العام للجهاز الذي تم إنشاؤه باستخدام صفوف وأعمدة ذات أسماء رائعة، استخدِم subgrid لنقل الصفوف والأعمدة المسماة بشكل جيد إلى تنسيقات الشبكة المدمَجة. هذه هي لحظة subgrid السحرية. ويمرر تخطيط الجهاز الصفوف والأعمدة المسماة إلى حاوية التطبيق، والتي تمررها بعد ذلك إلى كل فرع منها.

.device > .app,
.app > * {
    display: grid;
    grid: subgrid / subgrid;

    /* same as */
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

الشبكة الفرعية لخدمة CSS هي قيمة تُستخدَم بدلاً من قائمة مسارات الشبكة. الصفوف والأعمدة التي يمتد العنصر لها من الأصل، هي الآن نفس الصفوف والأعمدة التي يوفرها. هذا يجعل أسماء الأسطر من شبكة .device متاحة للعناصر الثانوية لـ .app، بدلاً من .app فقط. لم تتمكّن العناصر داخل .app من الإشارة إلى مسارات الشبكة التي أنشأها .device قبل الشبكة الفرعية.

مع تحديد كل هذا، يمكن الآن أن تتجاوز الصورة المدمجة الهوامش بالكامل في التنسيق بفضل subgrid. لا قيم أو حيل سلبية، بدلاً من ذلك نص لطيف واحد يقول "يمتد تخطيطي من fullbleed-start إلى fullbleed-end".

.app > main img {
    grid-area: fullbleed;
}
تخطيط الماكرو النهائي، مكتمل بصورة متداخلة العرض الكامل مع وضع إلغاء فاصل (نهاية التنقل) الأساسي وصفوف الرأس بشكلٍ صحيح ويمتد إلى كل سطر من أسطر الأعمدة المسماة التي تم تجاوزها بالكامل.
https://codepen.io/web-dot-dev/pen/WNLyjzX

وهذا كل ما في الأمر، شبكة ماكرو مثل المصممين، والتي يتم تنفيذها في CSS. يمكن أن يتوسع هذا المفهوم وينمو معك حسب الحاجة.

البحث عن الدعم

التحسين التدريجي باستخدام CSS والشبكة الفرعية مألوف ومباشر. استخدِم @supports وداخل الأقواس تسأل المتصفح ما إذا كان يفهم القيمة الفرعية كقيمة لأعمدة النموذج أو صفوفه. يتحقّق المثال التالي مما إذا كانت السمة grid-template-columns تتيح استخدام الكلمة الرئيسية subgrid، ويعني هذا أنّه يمكن استخدام الشبكة الفرعية.

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

أدوات مطوّري البرامج

يحتوي كل من Chrome وEdge وFirefox وSafari على "أدوات مطوري البرامج في شبكة CSS" الرائعة، ويحتوي Chrome وEdge وFirefox على أدوات محددة للمساعدة في الشبكة الفرعية. أعلن Chrome عن أدواته في الإصدار 115 بينما يعرضها Firefox لمدة عام أو أكثر.

معاينة لقطة شاشة لشارة الشبكة الفرعية على العناصر في لوحة "العناصر".

تعمل شارة الشبكة الفرعية كشارة الشبكة، ولكنها تميز بشكل مرئي الشبكات الفرعية وتلك التي ليست كذلك.

المراجع

هذه القائمة عبارة عن مجموعة من مقالات الشبكة الفرعية والعروض التوضيحية والإلهام العام للبدء. إذا كنت تبحث عن الخطوة التالية لتعليمك على الشبكة الفرعية، فيمكنك الاستمتاع باستكشاف كل هذه الموارد الرائعة!