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

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

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

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

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

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

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

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns