Image gallery with different image heights: Removing the gaps between

[lenato]

Hello,

hope you are all fine. 🎉

Currently I work with this script:
https://www.w3schools.com/howto/howto_js_portfolio_filter.asp

This is my state:
https://codepen.io/nicerboy/pen/QRrZQo
The problem is that gap between dfkjaslf.jpg and saada.jpg. 😭
There have to be images with different heights. The gaps should always be the same size.
I guess media queries are no option because of the resizable function (with that splitter in the middle).

I also tried it with a grid:
https://codepen.io/nicerboy/pen/MdGZEG
The images arrange correctly. But now there are vertical gaps. 🤔

Would be so thankful for help. ❤️

[dsonesuk]

What like?

https://www.w3schools.com/code/tryit.asp?filename=G4FKP2TZNEMA

[lenato]

Hello @dsonesuk,

thank you for your answer! 🌷

Hmmh. It really has to look like my first CodePen example, only without the gap.

I tried to use your code. The result shows the same problem:
https://www.w3schools.com/code/tryit.asp?filename=G4GRV9BNJM2D
Here are also gaps between the images.

Best,
lenato

[dsonesuk]

IF you want equal height columns use ALL of my code (missed .row styling and you don't require float anymore). IF you want title/comment  to bottom edge of image remove margin-top: auto; as it forces the targetted elament to bottom OR adjust h4 default margins to a smaller margin.

[lenato]

Hi @dsonesuk,

no, I want more something like that:
http://www.kristianhammerstad.com/

The gap sizes are always the same and the images sizes are different: That is what i want.
But it also has to be possible with that resizable splitter in the middle ...