Responsive Image Gallery using HTML and CSS

If you want to create a Responsive Image Gallery then this tutorial will help you a lot. Here I show step-by-step how you can create a Responsive Image Gallery using only HTML and CSS. Image galleries are used on many websites to keep a large number of images neatly arranged in one place.

This type of image gallery is used in various image-sharing websites or personal portfolio websites. These are fully responsive so you can definitely use them on any website. Earlier I shared with you the design of many more types of image galleries and image sliders. 

This HTML image gallery has been created very easily. First I added the images using some amount of HTML code then I used CSS code and arranged them nicely. Then using some amount of CSS I made it Responsive. Responsiveness makes it easy for any device used to access this image gallery.

Responsive Image Gallery 

If you want to know how this image gallery works, you can use the demo section below. This demo will help you to know how this Simple Responsive Image Gallery works. Here you will find the required source code. You can copy these codes and use them in your own work.

See the Pen Untitled by Foolish Developer (@foolishdevweb) on CodePen.

How to Create Responsive Image Gallery using HTML and CSS

You can also download the code needed to create this Responsive Image Gallery with the Download button at the bottom of the article. Below I have given the HTML and CSS code. First, you create the HTML and CSS file and add the following HTML and CSS code to that file. 

HTML Code:

The following codes have been added to the image using HTML code. First, create an area and then add the required image here. You copy the HTML code then paste it into your HTML file.

<div class="wrap">

 

 <div class="box">

  <div class="boxInner">

    <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg"/>

     <div class="titleBox">

  Spring daffodils

     </div>

   </div>

 </div>

 <div class="box">

  <div class="boxInner">

    <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg"/>

     <div class="titleBox">

Iris along the path

     </div>

  </div>

 </div>

 <div class="box">

  <div class="boxInner">

   <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg"/>

    <div class="titleBox">

      The garden blueprint

    </div>

  </div>

 </div>

 <div class="box">

  <div class="boxInner">

   <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg"/>

    <div class="titleBox">

      The garden blueprint

    </div>

  </div>

 </div>

 <div class="box">

  <div class="boxInner">

   <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg"/>

    <div class="titleBox">

      The garden blueprint

    </div>

  </div>

 </div>

 <div class="box">

  <div class="boxInner">

   <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg"/>

    <div class="titleBox">

      The garden blueprint

    </div>

  </div>

 </div>

</div>

CSS Code:

The following codes are the CSS code that helped to design it and make it responsive from the image gallery. First, using some code, I arranged the images neatly in columns and set the width and height of the images. Then using some code I made it Responsive. This can be seen in different ways for different devices.

Copy these codes and paste them into your CSS file. You can also add these CSS codes to your HTML file using style tags.

body {

    margin: 0;

    padding: 0;

    background: #EEE;

    font: 10px/13px 'Lucida Sans',sans-serif;

}

.wrap {

    overflow: hidden;

    margin: 10px;

  max-width: 1500px;

  margin-left: auto;

  margin-right: auto;

}

.box {

    float: left;

    position: relative;

    width: 20%;

    padding-bottom: 20%;

}

.boxInner {

    position: absolute;

    left: 10px;

    right: 10px;

    top: 10px;

    bottom: 10px;

    overflow: hidden;

}

 .boxInner img { width: 100% }

@media only screen and (max-width:480px) { 

    /* Smartphone view: 1 tile */

    .box {

        width: 100%;

        padding-bottom: 100%;

    }

}

@media only screen and (max-width:650px) and (min-width:481px) { 

    /* Tablet view: 2 tiles */

    .box {

        width: 50%;

        padding-bottom: 50%;

    }

}

@media only screen and (max-width:1050px) and (min-width:651px) { 

    /* Small desktop / ipad view: 3 tiles */

    .box {

        width: 33.3%;

        padding-bottom: 33.3%;

    }

}

@media only screen and (max-width:1290px) and (min-width:1051px) { 

    /* Medium desktop: 4 tiles */

    .box {

        width: 25%;

        padding-bottom: 25%;

    }

}

Hopefully, you have been able to create this Simple Responsive Image Gallery using the above codes. If there is any problem then you can take it with the help of the download button below.

 If you have any problems with creating this Responsive Image Gallery, please let me know in the comments.

The download will start automatically