Image Search App using unsplash API in ReactJS -4

Photo by Patrick T’Kindt on Unsplash

Welcome to part-4 of the series. You can find part-3 here.

In part-3 we had completed the version-1 of the app. Here, we will start making the version-2, where the images will be tiled better. To do so, we will use the magic of CSS grids and React Ref.

We will first start with CSS grid. For applying grid, lets add a class image__list to the <div> containing image list. Also, create a file imageList.css in the same directory.

import React from 'react';
import './imageList.css';

const ImageList = (props) => {
    const imgs = props.foundImages.map(img => {
        return <img key={img.id} src={img.urls.regular} alt={img.alt_description} />
    });

    return (
        <div className="image__list">{imgs}</div>
    )
}

export default ImageList;

Next, we will add some basic CSS grid to our imageList.css file. Here, we are giving rule to have each column 250px wide or 1fr(special unit in grid).

.image__list{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 10px;
}

.image__list img{
    width: 250px;
}

Head over to localhost and the see the magic of CSS grid.

Grid magic

You can read the rest of the blog from my blog post in the below link.

The Web Dev

You can find the github link here.