Auto adjust grid accordingly to the height and width of the image - Grid layout

Currently I’m using a grid layout with images that have different width and height. I would like the grid to automatically adjust to the height of the images and not leave any spacing between the row. How can I make the next item in the following row follow right underneath the item on the top row rather than adding white-space.

See attached.


Any help is highly appreciated. Thanks!
Read only:
https://preview.webflow.com/preview/fineartems?utm_medium=preview_link&utm_source=designer&utm_content=fineartems&preview=aed230f641de0e06f860efb35942c30e&mode=preview

One option may be to Span the Grid content, alternatively perhaps just use a single column?

I would like have the two columns or as many columns that can fit in one row and if not just move it to the next row and span is what I am trying to achieve, but it doesn’t seem to work the way I want it to.

https://webflow.com/website/Masonry-Grid
This was the solution, I was looking for. Here it is for anyone else who’s looking to auto adjust grids accordingly to the height and width of the images in a gallery also with a lightbox

The easiest way is to stick all the images into an inline-block set to 2 columns. Don’t use grid.