Masonry layout with the same equal columns and spacing [duplicate]

I have a problem with developing following columns layout:enter image description here

Please note: i dont exatcly know how many rows and columns i will have, but as per image it will be 3 columns per row and probably on the smaller device will go to two per row and finnaly 1 per row.

What would be the best way of achiving something like that?

Currently i have in use flexbox:

<div class="row gy-45 gy-md-0 gx-md-90"><div class="col-lg-8 col-md-12 grid-column"></div><div class="col-lg-8 col-md-12 grid-column"></div><div class="col-lg-8 col-md-12 grid-column"></div><div class="col-lg-8 col-md-12 grid-column"></div><div class="col-lg-8 col-md-12 grid-column"></div><div class="col-lg-8 col-md-12 grid-column"></div><div class="col-lg-8 col-md-12 grid-column"></div></div>

and to get this layout similar to the image i have added this css rule:

.grid-column:nth-child(3n + 1),      .grid-column:nth-child(3n + 3) {        margin-top: 15%;        margin-bottom: -10%;}

This however distrub the flow of the document and element like button is overlapping row:

enter image description here