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.

You can find the github link here.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Don’t let unit testing test you

JavaScript Technologies for Asynchronous Hooks

穂 (Japanese Kanji) — ear, ear (grain), head, crest (wave)

GSoC Week 2: Refactoring.

Using Node.js & Express.js to save data to MongoDB Database

In Defence of Opinionation

HTML Tags! (Pt. 3)

Creating a Serverless app using ExpressJS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Learning React with TypeScript by Building an API app

3 React Hooks You Should Not Miss in 2022

How to use react clean-up function with example

Linear-Gradient Underline Text