How to fill up gaps between images vertically?

Question

I have images where they are not always of the same height. Width will always be 300px.

I have over 50 images I am showing, at 4 images per row on large screens using flex-box. and it flex wraps automatically when we go down to smaller screens.

Down to 3 images per row and then 2 and then 1 depending on screen size.

I want to maintain this flex wrap concept but how can I adjust the images to fill up the gaps vertically too?

This is what I currently have.

I am looking to achieve this.

My code.

P.S: This is in a NextJS version 13 app using tailwindcss.

This is the main wrapper Component within which I loop a list of images and create the components.

  return (
    <div className={`flex flex-col flex-wrap gap-3 justify-around items-center md:flex-row md:items-start`}>
      {
        gifs.map((gif: GifProps) => {
          const {_id, url, is_user_generated} = gif;
          return <div key={_id}>
            <GifTile url={url} isUserGenerated={is_user_generated}/>
          </div>
        })
      }
    </div>
  );

Each individual Image component.

const GifTile = ({ url, isUserGenerated }: GifTileProps) => {
 return (
    {/* The height value here is doing nothing. The image height shows correctly 
       but it is a required field in Next JS's Image component thus passing in a 1 */}
   <Image alt="gif" src={url} width={300} height={1} /> 
 );
};

https://masonry.desandro.com/ Might be worth checking out this library, think it does exactly what you want. — DeveloperRyan, Dec 25 '22 at 01:01

score 0 · Answer 1 · answered Dec 25 '22 at 00:58

Would this work?

Change this:

<div className={`flex flex-col flex-wrap gap-3 justify-around items-center md:flex-row md:items-start`}>

To this:

<div className={`flex flex-col flex-wrap gap-x-3 gap-y-0 justify-around items-center md:flex-row md:items-start`}>

How to fill up gaps between images vertically?

1 Answers1