How would I align two <img> of different heights such that there is equal spacing between each one?

Question

I'm attempting to set up a photo gallery using only html/css for a school assignment, how would I make it such that two photos of different heights/widths automatically line up such that there is no empty space below one of the photos.

ie. if using rows, then such that there is no space between the bottom of the row and only on of the photos?

Answer 1

First, it will be easier if you can line make the images the same width and just set the height to auto.

Then, you could do something this: https://codepen.io/nikitaagarwal/pen/gpRPWO?editors=1100

which uses:

column-count: 4;
column-gap: 1em;

to create the page columns of equal width.

If you need to make them different widths, I think it would be easier to put only one width per column.

Aside: I usually use the Masonry library for this, but it contains JavaScript so you might not be able to. https://masonry.desandro.com/