Welcome to ThemesGadget. In this post, we are going to learn How To Make Responsive Image Gallery Using HTML And CSS In Blogger, and for any platform, you are using, just follow our steps carefully for avoiding any error. but first, Let's talk about it a little.
What Is a Responsive Image Gallery?
Image galleries are a great way to showcase your photos on your blog, website, or other digital projects. They can include both photos and videos, have links to the full-sized version of each image or video, and can be organized in any number of ways to create an attractive layout.
You might use them for display at an art gallery, as a portfolio for your photography work, or just for fun! They're simple to create with HTML and CSS. This article will show you how the easiest way to make a responsive image gallery with HTML and CSS.
How To Make An Responsive Image Gallery?
To make a responsive image gallery on WordPress, blogger, you need to add HTML and CSS. These codes have to be added in 2 steps. We will add HTML code in the 1st step, and CSS in the last step. and make sure to keep your all image dimensions the same which you are going to use an image for gallery.
There are 11 styles of a grid so you can select one of the styles that suit your requirement. we will be using the default image for gallery, so make sure to change it before publishing.
Step 1 - Adding HTML (Image Gallery HTML)
You can choose one of the styles listed below from <div class="image-grid till <hr/> as shown below, and you can replace the image address with yours.
<h2>Empty</h2><!-- FROM HERE-->
<div class="image-grid">
<div class="image-box"></div>
<div class="image-box"></div>
<div class="image-box"></div>
<div class="image-box"></div>
<div class="image-box"></div>
</div><!-- TO HERE-->
<hr/>
<h2>Partly filled</h2><!-- FROM HERE-->
<div class="image-grid">
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEO3YL5HRDKEv9mQ_VKQgF2QBXCvHeNlicmjOB3vaeQ9fJNb5MwqJP6eOh1ICrLWaY40ZgKDkBdHohKf0qV6t_7_dYa6mO-pYPLZi1X8bOGxXAGGt98UWUiARtP9R870IoaFLb-zUULwc/s0/unPlug-Demo-1.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcJaw6E9nn0uTERmzUpWKp60EGNM5qd9SegL8oAhLy6qfhwzBv958n-Oy36CHszxDWnHBaZ99UIp6-KIq_ZvKmUYklIfEP5GrDyVsU4RZ34lWMuf2HWbmKrj36z9CY8nz-FBRzTEuLxdM/s0/unPlug-Demo-2.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTSR0jd1dOTdbllctZsQ6kVVmRwrcbW_IHf26QUofTGCNQepD4_1HvQxKef4f6eI1diaReZ-ioTovwbe9sqL0bWACFi62rl2NPr6D-I4uqTlyelTs3uQ5fLB4MXtJ_-_9nupoP_xiHKT0/s0/unPlug-Demo-3.webp' alt=''></div>
<div class="image-box"></div>
<div class="image-box"></div>
</div><!-- TO HERE-->
<hr/>
<h2>Filled</h2><!-- FROM HERE-->
<div class="image-grid">
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEO3YL5HRDKEv9mQ_VKQgF2QBXCvHeNlicmjOB3vaeQ9fJNb5MwqJP6eOh1ICrLWaY40ZgKDkBdHohKf0qV6t_7_dYa6mO-pYPLZi1X8bOGxXAGGt98UWUiARtP9R870IoaFLb-zUULwc/s0/unPlug-Demo-1.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcJaw6E9nn0uTERmzUpWKp60EGNM5qd9SegL8oAhLy6qfhwzBv958n-Oy36CHszxDWnHBaZ99UIp6-KIq_ZvKmUYklIfEP5GrDyVsU4RZ34lWMuf2HWbmKrj36z9CY8nz-FBRzTEuLxdM/s0/unPlug-Demo-2.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTSR0jd1dOTdbllctZsQ6kVVmRwrcbW_IHf26QUofTGCNQepD4_1HvQxKef4f6eI1diaReZ-ioTovwbe9sqL0bWACFi62rl2NPr6D-I4uqTlyelTs3uQ5fLB4MXtJ_-_9nupoP_xiHKT0/s0/unPlug-Demo-3.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitxKs3GxAw_1gymtcc_QBnezIq6kdrm0wG5gZN8ow3ZFIL7IEyFa_jr_hpuPA6CCNATgFU-Viwf3U3wyYPcmZ-Rpn_d6-yOCC5_nYs6344dOS1YrbtsT3ywZUtxsG-ANFFAArQ7WZ5BGM/s0/unPlug-Demo-4.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgys-JMWzAB9prJbruvRpAQIuXJr2jbBaCUTBgVqhgvuYAp4vinrbXEVTBqGEsUgL3vNmH2VEuzArSmEAyrLub7lBjFZtlWal3LQS-Epa0GA2cXBW-2G_reEm468KQm9gimDWP8bagMn2c/s0/unPlug-Demo-5.webp' alt=''></div>
</div><!-- TO HERE-->
<hr/>
<h2>Custom Aspect Ratio</h2><!-- FROM HERE-->
<div class="image-grid custom">
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEO3YL5HRDKEv9mQ_VKQgF2QBXCvHeNlicmjOB3vaeQ9fJNb5MwqJP6eOh1ICrLWaY40ZgKDkBdHohKf0qV6t_7_dYa6mO-pYPLZi1X8bOGxXAGGt98UWUiARtP9R870IoaFLb-zUULwc/s0/unPlug-Demo-1.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcJaw6E9nn0uTERmzUpWKp60EGNM5qd9SegL8oAhLy6qfhwzBv958n-Oy36CHszxDWnHBaZ99UIp6-KIq_ZvKmUYklIfEP5GrDyVsU4RZ34lWMuf2HWbmKrj36z9CY8nz-FBRzTEuLxdM/s0/unPlug-Demo-2.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTSR0jd1dOTdbllctZsQ6kVVmRwrcbW_IHf26QUofTGCNQepD4_1HvQxKef4f6eI1diaReZ-ioTovwbe9sqL0bWACFi62rl2NPr6D-I4uqTlyelTs3uQ5fLB4MXtJ_-_9nupoP_xiHKT0/s0/unPlug-Demo-3.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitxKs3GxAw_1gymtcc_QBnezIq6kdrm0wG5gZN8ow3ZFIL7IEyFa_jr_hpuPA6CCNATgFU-Viwf3U3wyYPcmZ-Rpn_d6-yOCC5_nYs6344dOS1YrbtsT3ywZUtxsG-ANFFAArQ7WZ5BGM/s0/unPlug-Demo-4.webp' alt=''></div>
<div class="image-box"></div>
</div><!-- TO HERE-->
<hr/>
<h2>Different Number of Elements</h2>
<h3>2 Elements</h3><!-- FROM HERE-->
<div class="image-grid">
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEO3YL5HRDKEv9mQ_VKQgF2QBXCvHeNlicmjOB3vaeQ9fJNb5MwqJP6eOh1ICrLWaY40ZgKDkBdHohKf0qV6t_7_dYa6mO-pYPLZi1X8bOGxXAGGt98UWUiARtP9R870IoaFLb-zUULwc/s0/unPlug-Demo-1.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcJaw6E9nn0uTERmzUpWKp60EGNM5qd9SegL8oAhLy6qfhwzBv958n-Oy36CHszxDWnHBaZ99UIp6-KIq_ZvKmUYklIfEP5GrDyVsU4RZ34lWMuf2HWbmKrj36z9CY8nz-FBRzTEuLxdM/s0/unPlug-Demo-2.webp' alt=''></div>
</div><!-- TO HERE-->
<hr/>
<h3>3 Elements</h3><!-- FROM HERE-->
<div class="image-grid">
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEO3YL5HRDKEv9mQ_VKQgF2QBXCvHeNlicmjOB3vaeQ9fJNb5MwqJP6eOh1ICrLWaY40ZgKDkBdHohKf0qV6t_7_dYa6mO-pYPLZi1X8bOGxXAGGt98UWUiARtP9R870IoaFLb-zUULwc/s0/unPlug-Demo-1.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcJaw6E9nn0uTERmzUpWKp60EGNM5qd9SegL8oAhLy6qfhwzBv958n-Oy36CHszxDWnHBaZ99UIp6-KIq_ZvKmUYklIfEP5GrDyVsU4RZ34lWMuf2HWbmKrj36z9CY8nz-FBRzTEuLxdM/s0/unPlug-Demo-2.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTSR0jd1dOTdbllctZsQ6kVVmRwrcbW_IHf26QUofTGCNQepD4_1HvQxKef4f6eI1diaReZ-ioTovwbe9sqL0bWACFi62rl2NPr6D-I4uqTlyelTs3uQ5fLB4MXtJ_-_9nupoP_xiHKT0/s0/unPlug-Demo-3.webp' alt=''></div>
</div><!-- TO HERE-->
<hr/>
<h3>4 Elements</h3><!-- FROM HERE-->
<div class="image-grid">
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEO3YL5HRDKEv9mQ_VKQgF2QBXCvHeNlicmjOB3vaeQ9fJNb5MwqJP6eOh1ICrLWaY40ZgKDkBdHohKf0qV6t_7_dYa6mO-pYPLZi1X8bOGxXAGGt98UWUiARtP9R870IoaFLb-zUULwc/s0/unPlug-Demo-1.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcJaw6E9nn0uTERmzUpWKp60EGNM5qd9SegL8oAhLy6qfhwzBv958n-Oy36CHszxDWnHBaZ99UIp6-KIq_ZvKmUYklIfEP5GrDyVsU4RZ34lWMuf2HWbmKrj36z9CY8nz-FBRzTEuLxdM/s0/unPlug-Demo-2.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTSR0jd1dOTdbllctZsQ6kVVmRwrcbW_IHf26QUofTGCNQepD4_1HvQxKef4f6eI1diaReZ-ioTovwbe9sqL0bWACFi62rl2NPr6D-I4uqTlyelTs3uQ5fLB4MXtJ_-_9nupoP_xiHKT0/s0/unPlug-Demo-3.webp' alt=''></div>
<div class="image-box"></div>
</div><!-- TO HERE-->
<hr/>
<h3>5 Elements</h3><!-- FROM HERE-->
<div class="image-grid">
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEO3YL5HRDKEv9mQ_VKQgF2QBXCvHeNlicmjOB3vaeQ9fJNb5MwqJP6eOh1ICrLWaY40ZgKDkBdHohKf0qV6t_7_dYa6mO-pYPLZi1X8bOGxXAGGt98UWUiARtP9R870IoaFLb-zUULwc/s0/unPlug-Demo-1.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcJaw6E9nn0uTERmzUpWKp60EGNM5qd9SegL8oAhLy6qfhwzBv958n-Oy36CHszxDWnHBaZ99UIp6-KIq_ZvKmUYklIfEP5GrDyVsU4RZ34lWMuf2HWbmKrj36z9CY8nz-FBRzTEuLxdM/s0/unPlug-Demo-2.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTSR0jd1dOTdbllctZsQ6kVVmRwrcbW_IHf26QUofTGCNQepD4_1HvQxKef4f6eI1diaReZ-ioTovwbe9sqL0bWACFi62rl2NPr6D-I4uqTlyelTs3uQ5fLB4MXtJ_-_9nupoP_xiHKT0/s0/unPlug-Demo-3.webp' alt=''></div>
<div class="image-box"></div>
<div class="image-box"></div>
</div><!-- TO HERE-->
<hr/>
<h3>6 Elements</h3><!-- FROM HERE-->
<div class="image-grid">
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEO3YL5HRDKEv9mQ_VKQgF2QBXCvHeNlicmjOB3vaeQ9fJNb5MwqJP6eOh1ICrLWaY40ZgKDkBdHohKf0qV6t_7_dYa6mO-pYPLZi1X8bOGxXAGGt98UWUiARtP9R870IoaFLb-zUULwc/s0/unPlug-Demo-1.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcJaw6E9nn0uTERmzUpWKp60EGNM5qd9SegL8oAhLy6qfhwzBv958n-Oy36CHszxDWnHBaZ99UIp6-KIq_ZvKmUYklIfEP5GrDyVsU4RZ34lWMuf2HWbmKrj36z9CY8nz-FBRzTEuLxdM/s0/unPlug-Demo-2.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTSR0jd1dOTdbllctZsQ6kVVmRwrcbW_IHf26QUofTGCNQepD4_1HvQxKef4f6eI1diaReZ-ioTovwbe9sqL0bWACFi62rl2NPr6D-I4uqTlyelTs3uQ5fLB4MXtJ_-_9nupoP_xiHKT0/s0/unPlug-Demo-3.webp' alt=''></div>
<div class="image-box"></div>
<div class="image-box"></div>
<div class="image-box"></div>
</div><!-- TO HERE-->
<hr/>
<h3>7 Elements</h3><!-- FROM HERE-->
<div class="image-grid">
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEO3YL5HRDKEv9mQ_VKQgF2QBXCvHeNlicmjOB3vaeQ9fJNb5MwqJP6eOh1ICrLWaY40ZgKDkBdHohKf0qV6t_7_dYa6mO-pYPLZi1X8bOGxXAGGt98UWUiARtP9R870IoaFLb-zUULwc/s0/unPlug-Demo-1.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcJaw6E9nn0uTERmzUpWKp60EGNM5qd9SegL8oAhLy6qfhwzBv958n-Oy36CHszxDWnHBaZ99UIp6-KIq_ZvKmUYklIfEP5GrDyVsU4RZ34lWMuf2HWbmKrj36z9CY8nz-FBRzTEuLxdM/s0/unPlug-Demo-2.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTSR0jd1dOTdbllctZsQ6kVVmRwrcbW_IHf26QUofTGCNQepD4_1HvQxKef4f6eI1diaReZ-ioTovwbe9sqL0bWACFi62rl2NPr6D-I4uqTlyelTs3uQ5fLB4MXtJ_-_9nupoP_xiHKT0/s0/unPlug-Demo-3.webp' alt=''></div>
<div class="image-box"></div>
<div class="image-box"></div>
<div class="image-box"></div>
<div class="image-box"></div>
</div><!-- TO HERE-->
<hr/>
<h3>8 Elements</h3><!-- FROM HERE-->
<div class="image-grid">
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEO3YL5HRDKEv9mQ_VKQgF2QBXCvHeNlicmjOB3vaeQ9fJNb5MwqJP6eOh1ICrLWaY40ZgKDkBdHohKf0qV6t_7_dYa6mO-pYPLZi1X8bOGxXAGGt98UWUiARtP9R870IoaFLb-zUULwc/s0/unPlug-Demo-1.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcJaw6E9nn0uTERmzUpWKp60EGNM5qd9SegL8oAhLy6qfhwzBv958n-Oy36CHszxDWnHBaZ99UIp6-KIq_ZvKmUYklIfEP5GrDyVsU4RZ34lWMuf2HWbmKrj36z9CY8nz-FBRzTEuLxdM/s0/unPlug-Demo-2.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTSR0jd1dOTdbllctZsQ6kVVmRwrcbW_IHf26QUofTGCNQepD4_1HvQxKef4f6eI1diaReZ-ioTovwbe9sqL0bWACFi62rl2NPr6D-I4uqTlyelTs3uQ5fLB4MXtJ_-_9nupoP_xiHKT0/s0/unPlug-Demo-3.webp' alt=''></div>
<div class="image-box"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitxKs3GxAw_1gymtcc_QBnezIq6kdrm0wG5gZN8ow3ZFIL7IEyFa_jr_hpuPA6CCNATgFU-Viwf3U3wyYPcmZ-Rpn_d6-yOCC5_nYs6344dOS1YrbtsT3ywZUtxsG-ANFFAArQ7WZ5BGM/s0/unPlug-Demo-4.webp' alt=''></div>
<div class="image-box"></div>
<div class="image-box"></div>
<div class="image-box"></div>
<div class="image-box"></div>
</div><!-- TO HERE-->
Step 2 - Adding CSS (Image Gallery CSS)
These CSS Codes are in Compressed format if you want to beautify you can use our tool by Following this Link - CSS Beautifier Tool.
If you are using a blogger template like iMagz + Landing page then you have to add this highlighted CSS code otherwise no need to add this piece of code.
<style>
.pBd img {
display: unset;
border-radius: 0;
height: -webkit-fill-available !important;
}
.image-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-gap:min(2vw,1rem);}.image-grid>*{grid-column:span 3;}.image-grid>*:nth-last-child(1):first-child,.image-grid>*:nth-last-child(2):first-child,.image-grid>*:nth-last-child(2):first-child~*{grid-column:span 6;}.image-grid>*:nth-last-child(3):first-child,.image-grid>*:nth-last-child(3):first-child~*,.image-grid>*:nth-last-child(6):first-child,.image-grid>*:nth-last-child(6):first-child~*{grid-column:span 4;}.image-grid>*:nth-last-child(5):first-child{grid-column:span 6;grid-row:span 2;}.image-grid>*:nth-last-child(7):first-child,.image-grid>*:nth-last-child(7):first-child+*,.image-grid>*:nth-last-child(7):first-child+*+*{grid-column:span 4;}.custom{--image-box-ratio:3/2;}.image-box{background-color:#EAEFF4;border-radius:0.5rem;position:relative;overflow:hidden;}.image-box>*{position:absolute;width:100%;height:100%;top:0;left:0;object-fit:cover;}.image-box::before{content:"";display:block;width:100%;height:0;padding-top:calc(100% / (var(--image-box-ratio,1)));background-image:url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='.1' fill='%23394A5C'%3E%3Cpath d='M23 30a7 7 0 100-14 7 7 0 000 14zM7 48l7-9c3-2 7-3 10 0 2 2 6 2 8-1l3-4c3-4 9-4 11 0l11 14H7z'/%3E%3C/g%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center center;}
</style>
Conclusion
In this tutorial, we covered several different styles and topics including, creating responsive image galleries, using images in different ways, the Import Function and Selector in CSS, the browsers support for CSS, and displaying images inside an image element inside a jpg, png gallery.
I hope you enjoyed this article on how to make a responsive image gallery using HTML And CSS, and I hope that it helps you build your responsive gallery on your site! Please comment with any questions or feedback you might have, and I'll see you in the next article.