جافاسكريبت - كيف يمكنني الحصول على قوائم شبكية متداخلة في Angular Material؟

عندما أحاول تداخل الشبكات في Angular، تختفي الشبكة الداخلية. إليك مثال: https://stackblitz.com/edit/angular-eib7wz

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

أنا أستخدم قائمة الشبكة لتقسيم صفحتي إلى أقسام صغيرة وفي كل قسم أريد وضع مكون مختلف وأحد هذه المكونات هو شبكة أصغر أخرى.

أنا منفتح على الاقتراحات. شكرًا على المساعدة.

الإجابة رقم 1

الشبكة تظهر عند التداخل، لكن الحجم يكون صفرًا... لذلك نضيف div ونقوم بتنسيقه... لقد وضعت عمدًا min-width:80%... لتحقيق هدفك، قد ترغب في وضع min-width:100%:

أضف CSS التالية ذات الصلة:

.internalMatGrid{  border:1px solid red; min-width:80%;}

HTML ذات الصلة:

<mat-grid-list cols="2" rowHeight="2:1">
  <mat-grid-tile>
    <div class='internalMatGrid' >
      <mat-grid-list cols="2" rowHeight="2:1">
        <mat-grid-tile>1</mat-grid-tile>
        <mat-grid-tile>2</mat-grid-tile>
        <mat-grid-tile>3</mat-grid-tile>
        <mat-grid-tile>4</mat-grid-tile>
      </mat-grid-list>
    </div>
  </mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>

يمكنك التحقق من نسخة تعمل على Stackblitz هنا