I have a grid of items and I want to display another component that takes up the full width below the clicked item when it's selected.
Here is an illustration of what I'm trying to accomplish: https://i.sstatic.net/5XIvf.png
Within my button-list-component, there is a button-component that displays the items using ngFor. When an item is clicked, the size-selection-component is shown using ngIf.
The issue I'm facing is that if the size-selection-component is within the button-list-component, it appends at the end of the grid. Alternatively, if placed in the button-component, it only takes the width of the column containing the clicked item.
If I use position: absolute to make it the width of the container, the following items won't flow down properly.
Below is a snippet of my code:
button-list
<div class="wrapper">
<div class="container">
<app-button *ngFor="let button of buttons;" [button]="button" (buttonClicked)="onButtonClicked($event)">
</app-button>
</div>
</div>
.container {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(250rem, 1fr));
grid-gap: 10rem;
place-items: start center;
overflow-x: hidden;
overflow-y: auto;
margin: 10rem;
}
button
<div class="product">
<div class="product-col">
<h2 class="product_title" (click)="onButtonClicked()">{{button.Caption}}</h2>
<img class="product_img" [src]="picture" alt="" (click)="onButtonClicked()">
<span class="product_price" *ngIf="button.Price && button.Price != '0'">{{button.Price / 100 | currency}}</span>
</div>
</div>
<app-size-selection-button-list *ngIf="isSizeSelectionOpen"></app-size-selection-button-list>
I'm looking for suggestions on how to achieve this layout effectively, whether through CSS solutions or other methods for inserting components into the grid seamlessly.
Thank you