Building a Responsive Image Gallery

Learn to build a responsive Image Gallery with basic Flexbox

In this post you would learn to build a basic image gallery with flexbox concepts, Let’s dive right in!

What is flexbox? Flexbox (short for Flexible Box) is a CSS layout module that was introduced for a better way to create layouts for webpages and align items (group of items) in a container whilst maintaining responsiveness. It was made to adapt webpages to different screen sizes and orientations using rows and columns.

This tutorial assumes a basic knowledge of HTML and CSS. We’ll be creating the image gallery with plain html and css, any text editor or IDE would suffice to write the code

Go to your favourite editor and create an index.html file with the following contents

We will be making use of Picsum (an online picture generator) to generate random pictures for our gallery.

Insert https://picsum.photos/300/200?random as image source for all the image tags.

So it should look like

<div><img src=’https://picsum.photos/300/200/?random’/></div>

Next, we’ll proceed to styling our images. To do this, we’ll create a new file named styles.css which will house the stylesheet for our gallery. This file should reside inside the same directory as the HTML file.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
img {
 margin: 5px;
 transition: all 2s;
}
img:hover {
 transform: scale (1.1);
}

Let’s get to explain what the styles do.

.container {
    display: flex;
}

Sets the display property of the container to position itself using flexbox preset properties.

flex-wrap: wrap;

basically instructs the browser to make the images break and continue on the next line when theybecome to much to fit in a single line.

justify-content: center;

Justify-content tells the browser to position the images.
The center value tells the browser to place the images in the centre of the browser.

.img {
   margin: 5px;    
}                                                                              

Adds a margin of 5pixels to the images .

transition: all 2s 

Adds a transition effect (incremental enlargement) to all of the images for 2 seconds

img:hover {
  transform: scale(1.1)
}

Adds a 2D scale transformation effect to the image.

A screenshot of my windows browser when I hover above one of the images

Found this tutorial helpful? Do not forget to give share to someone who might need this, A clap also would do no harm :)