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

تعد شبكة 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
• "راشيل أندرو" تستخدم مقاطع ترجمة وشرح متوافقة
• راشيل أندرو مع 10 أمثلة رائعة
• راشيل أندرو تعرض عددًا من الأمثلة
• مقالة أحمد شادي
• "ميشيل باركر" في يوم CSS لعام 2022
• البطاقات
  • برنامج Codepen من Jhey
  • Codepen من إعداد أحمد شادي
  • Codepen من تأليف تاكيشي كانو
  • Codepen من Arvid
  • برنامج Codepen من إعداد "كريس كويير"
  • Codepen من ميريام سوزان
• Chris Coyier مع النماذج
• Facundo Corradini مع محاذاة النموذج
• "كريس كويير" مع محاذاة علامات عناصر القائمة
• خروج "ميشيل باركر" من الحاوية لتتلاءم مع الشبكة الرئيسية
• مريم سوزان تعرض أسماء الأسطر المحدَّدة والتفاعلات الفرعية
• كيفن باول مع أساسيات المنطقة المُعنوَنة
• كيفين باول مع قوائم مُحاذية
• "شانون مولر" مع قوائم متوافقة
• Kevin Powell مع شبكة على مستوى الصفحة تم تمريرها إلى العناصر
• "إلاد شيختر" مع تراكب أداة devأداة وأداة احتياطية
• Aaron Iker مع استخدام جميل للنص المطبعي للشبكة الفرعية لمحاذاة قاعدة السطر للحواشي السفلية
• "آدم أرغيل" مع صورة تتخطى الهوامش بالكامل داخل مقالة