css - How to make Image gallery Layout like Pexels.com?

Question

I am trying to make a dynamic image gallery with help of Pexels API. How to make the Layout like https://pexels.com using CSS.

Currently, I made 3 columns. but If there were lots of images to load dynamically. It won't work as I am expecting.

I am using React framework and rendering images with help of this logic.

useEffect(() => {
 // data is responded from APIs
    if (data) {
      const { pages } = data;

      const newArr = cols;
      let counter = 0;
      const paginate = pages[pages.length - 1];
      while (paginate.photos.length) {
        // filling each col like this.
        newArr[counter].push(...paginate.photos.splice(0, 3));
        counter = counter == 2 ? 0 : counter + 1; // 3 cols only
      } 
      setCols([...newArr]);
    }
  }, [data]);

I am looking for a little robust solution

标签： cssreactjsflexboxcss-grid