Dynamic Grid Column height and position

Hi there I’m using Vaadin 14 to create a grid contains cards like Vaadin Bakery application’s Storefront view does. I want to achieve each card could expand when click some button on the card.

I’m facing the problem is grid column/row position seems fixed, I did :host [part~="cell"] { height: auto; } to make cell height dynamically change when click the card, but the expanded part will overlap the other columns since [part~="row"] is absolute.

I tried make row position unset by doing

:host #items [part~="row"]
    position: unset;

however after setting this, columns will have huge gap between each other and I could locate this gap from where. I tried set negative value for margin-topto move each columns up, seems doesn’t work well especially my card has different height.

Any ideas would be appreciate.