تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

تعد شبكة 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 */
}

لقطة شاشة لأداة CSS DevTools لشبكة CSS، تعرِض عمودَين جنبًا إلى جنب مع اسم في بداية سطر العمود — https://codepen.io/web-dot-dev/pen/NWezjXv

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

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

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

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

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

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

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

لقطة شاشة
من أدوات مطوّري البرامج لشبكة CSS في Chrome تعرِض تصميم شبكة بحجم الأجهزة الجوّالة
حيث يتم تسمية الصفوف والأعمدة لتحديدها بسرعة: fullbleed،
system-status، primary-nav، primary-header، main، footer وsystem-gestures.

تنشئ خدمة 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 DevTools نفسها التي تظهر على الشاشة كما في السابق، ولكن هذه المرة مع بعض عناصر واجهة مستخدم نظام التشغيل المتوافق مع الأجهزة الجوّالة، وبعض الظلال وقليل من الألوان يساعد في معرفة أين
يذهب التصميم.

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

لقطة شاشة zoomed in لشبكة التراكب من DevTools، مع التركيز بشكل خاص على
اسمَي العمودَين fullbleed-start وfullbleed-end

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

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

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

الموارد

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