Create a Responsive Image Gallery using CSS Flexbox Grid

Hello friends, In this blog, we will share a snippet on the Responsive Image Gallery using CSS Flexbox Grid. Now flexbox is a new way to create our CSS layout. Those of us working with CSS layout like PSD to HTML or any template making know that we have to make CSS layouts for our design. We need to put all the elements in a particular position in the design process. We used to make our layouts with tables, float, positioning, etc. The use of the table has become obsolete and not a best practice nowadays. We face problems when trying to position an element with positioning as well. When we use CSS flex layout with a small amount of markup, we can overcome these problems and will be able to finish a project within a short period.

In this project (Responsive Image Gallery using CSS Flexbox Grid), we will create a simple image gallery of six images and make them look responsive in the different viewport. We will use the CSS flexbox to design the snippet. First, we will take a div element with the class name "wrapper," which will act as a container of the images we will take. Then I have taken an h1 tag, and after that, I have taken another div element named "img-area." inside the "img-area" div element, I have six div element with the name of "single-img," and inside all of those, I have put an image.

for the CSS part,first i styled the h1 tag and after that i gave the "img-area" div a display flex,flex-wrap,flex-direction,align-items and justify-content value. after the styling, the images of the "img-area" div element will be aligned row-wise.

After that, I have given a custom padding to the "single-img" divs to maintain a distance from each other. This simple CSS flex layout styling and the image gallery will act as responsive in all kinds o devices. I have also added a simple opacity hover effect for all the images to make it a bit aesthetic.

You may also like:

• Menu Animation with Moving Hover
• Responsive Bootstrap 4 Card
• Animated Typewriter text

For the creation of this snippet, we have to produce two different files. The Initial one is the HTML File, and the last one is the CSS file. You need to copy the HTML, CSS, and js code given below and paste them to the appropriate files and save them. After that, run the project in your browser and modify according to your need.

HTML

<div class="wrapper"> <h1> Flexbox Image gallery</h1> <div class="img-area"> <div class="single-img"> <img src="https://i.postimg.cc/0jSZVyv4/1.jpg" alt=""></div> <div class="single-img"> <img src="https://i.postimg.cc/fTxBXyBt/2.jpg" alt=""></div> <div class="single-img"> <img src="https://i.postimg.cc/qvwwbYfp/3.jpg" alt=""></div> <div class="single-img"> <img src="https://i.postimg.cc/KctnpVLC/4.jpg" alt=""></div> <div class="single-img"> <img src="https://i.postimg.cc/JzYJBWVH/5.jpg" alt=""></div> <div class="single-img"> <img src="https://i.postimg.cc/3NhDH8pV/6.jpg" alt=""></div> </div> </div>


CSS:

.wrapper h1 { text-align: center; font-size: 30px; font-family: lato; text-transform: uppercase; } .img-area { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; } .single-img{ padding:0 20px 20px; } img:hover{ opacity: .5; transition: .9s; }

I hope you like this tutorial. I hope it helps. Please follow this blog on our Twitter and Facebook Group to stay updated for the future posts.