Coloque el div debajo de otro div con la propiedad display: grid.

Tengo problemas para colocar un div debajo de otro div con display: grid. El div se está colocando encima del otro y no debajo.

“app-bm-payment-card-item” es un componente personalizado de Angular.

Archivo HTML

<!-- Envoltorio div -->
<div *ngif="pageReady && myProfiles" class="ion-padding">

<!-- Div que muestra las tarjetas apiladas o colapsadas -->
<div *ngif="!inEditMode" class="card_container_stacked_main">
  <app-bm-payment-card-item *ngfor="let card of myProfiles" [card]="card" [editmode]="inEditMode" (ondeleteclick)="removeCard(card)" (onselect)="selectCard(card)" (oneditclick)="editCardInfo(card)">
  </app-bm-payment-card-item>
</div>

<!-- Div que muestra las tarjetas expandidas -->
<div *ngif="inEditMode" class="card_container_expanded_main">
  <app-bm-payment-card-item *ngfor="let card of myProfiles" [card]="card" [editmode]="inEditMode" (ondeleteclick)="removeCard(card)" (onselect)="selectCard(card)" (oneditclick)="editCardInfo(card)">
  </app-bm-payment-card-item>
</div>

<!-- Div que debe colocarse debajo del otro (s) -->
<div class="div">
  TEXT
</div>

</div>

Archivo SCSS:

.card_container_stacked_main {
  display: grid;
  position: relative;
  grid-auto-rows:30px; /* una altura fija para crear un desbordamiento */
}

.card_container_expanded_main {
  position: relative;
  max-width: 400px !important;
  //margin-bottom: 15px;
}

.div {
  position: relative;
}

Entonces, la funcionalidad básica es que al tocar cualquier tarjeta, la lista de tarjetas se muestre apilada o colapsada. Es por eso que estoy usando el booleano inEditMode, para saber qué div se debe mostrar y cuál ocultar. Cuando se muestra la lista de tarjetas expandida, el div (TEXT) se coloca debajo de la lista correctamente, pero cuando se activa la lista de tarjetas apiladas, el div se coloca encima de la lista, lo cual es incorrecto, debería colocarse debajo de la lista de tarjetas apiladas/colapsadas. Ver las imágenes a continuación:

Imagen de la lista de tarjetas apiladas

Imagen de la lista de tarjetas colapsadas