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

تاريخ النشر: 28 أيلول (سبتمبر) 2023

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

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

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

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

في ما يلي حالة استخدام مباشرة تعرِض أساسيات 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 */
}

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

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

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

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

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

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

ينشئ ملف 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];
}

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

داخل هذا العنصر الرئيسي، هناك عناصر مُدمجة مختلفة. يتطلّب التصميم صورة بعرض كامل تحت صفّي التنقّل والعناوين. أسماء سطور العمودين الأيمن والأيسر القصوى هي 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;
}

إليك شبكة كبيرة مثل تلك التي يستخدمها المصممون، تم تنفيذها باستخدام 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 يوفّرها منذ عام أو أكثر.

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

الموارد

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

• MDN
• Rachel Andrew مع مقاطع ترجمة وشرح مُحاذاة
• راشيل أندرو تقدّم 10 أمثلة رائعة
• Rachel Andrew مع موقع إلكتروني يتضمّن أمثلة
• مقالة أحمد شايد
• ميشيل باركر في CSS Day 2022
• البطاقات
  • Codepen من Jhey
  • Codepen من إعداد أحمد شادي
  • Codepen من تأليف تاكيشي كانو
  • Codepen من Arvid
  • Codepen من إنشاء "كريس كويير"
  • Codepen من إعداد ميريام سوزان
• Chris Coyier مع النماذج
• Facundo Corradini مع محاذاة النموذج
• كريس كوييه يوضّح كيفية محاذاة علامات عناصر القائمة
• خروج "ميشيل باركر" من الحاوية لتتلاءم مع الشبكة الرئيسية
• ميريام سوزان تعرض أسماء الخطوط المُسمّاة وتفاعلات الشبكة الفرعية
• كيفين باول يشرح أساسيات المناطق المُسمّاة
• كيفين باول مع قوائم مُحاذية
• Shannon Moeller مع قوائم مُحسَّنة
• Kevin Powell مع شبكة على مستوى الصفحة تم تمريرها إلى العناصر
• Elad Shechter مع تراكب devtool والعنصر الاحتياطي
• Aaron Iker مع استخدام جميل للنص المطبعي للشبكة الفرعية لمحاذاة قاعدة السطر للحواشي السفلية
• آدم أرجيل مع صورة ملء الشاشة داخل مقالة