Hello Coders, Today we are going to learn how to create responsive image gallery using only few lines of html and css code.
What is Image Gallery?
Image galleries in websites are often used to showcase the images that they have. For an example, Lets consider an photographer who needs to showcase his/her work on website. He is gonna need to build a gallery right?
What is Responsive Image Gallery?
Here the word responsive plays a huge role in the world of web development. Responsive in simple words means that, no matter in what screen sizes (mobile, tablet, PC, laptop) the user opens the gallery or website, It always adjust itself to look good on that screen size.
How to create responsive image gallery?
In this article I have provided all the source codes as well as an step by step video tutorial to help you build responsive image gallery with html and css.
Responsive Image Gallery using HTML and CSS | Video Tutorial
The video tutorial is a step by step guide on how to build Image gallery with the help of html and css. It will help you a lot if you are a complete beginner to web development.
Responsive Image Gallery with HTML and CSS | Source Codes
Below are both html and css code of the Image gallery. You can also download complete source code by clicking on the download button at the bottom of this article.
How do I create Responsive Image gallery in HTML? Free HTML source code
First create an index.html file, add all the structure of an html document such as html tag, head, title, body tags. Copy the below source code in the html document.
HTML Code : All the images used in the code can be downloaded by clicking on the download button at the bottom of this article.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Image Gallery</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<section class="photo-grid-container">
<div class="photo-grid-item">
<img src="images/img1.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img2.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img3.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img4.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img5.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img6.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img7.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img8.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img9.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img10.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img11.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img12.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img13.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img14.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img15.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img16.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img17.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img18.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img19.jpg" alt="" />
</div>
<div class="photo-grid-item">
<img src="images/img20.jpg" alt="" />
</div>
</section>
</body>
</html>
How do I design Responsive Image gallery in CSS? Free CSS source code
Now create styles.css file and link our css file to the html document between the head tag. Copy below css code.
CSS Code : This is the CSS code for making our responsive image gallery. Yes, in just a few lines of CSS code.
body {
background: #111;
}
img {
width: 100%;
}
.photo-grid-container {
column-count: 5;
column-width: 300px;
}
.photo-grid-item {
margin: 0 auto 15px;
max-width: 400px;
width: 100%;
}
This is what you will get once done adding both html and css code.
Thank you for reading this article.
Credits: Kyle Shook
Download Source Code of Responsive Image Gallery with just html and css :
