Image Search App using unsplash API in ReactJS -4

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.

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).

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

Image for post
Image for post
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.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

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