How to Create Beautiful Responsive Image Gallery Using Pure HTML & CSS

July 03, 2021

Beautiful Image Gallery Using Pure HTML & CSS

Photographers and web designers are constantly looking for a way to showcase their creativity. In the age of the internet, putting up an online gallery to highlight the best works is a great way to attract clients.

Most website layouts in this collection have a clean and minimalist design. So, your audience won’t be distracted from your stunning photography or web design portfolio.

At that, these web templates are easy to use and customize, as they come supplied with a drag and drop editor. All you need to do is mix and match specific website elements to create the final look that will fit your needs.

Apart from the drag and drop functionality, the majority of layouts offer users a bunch of extra features. Using special add-ons and widgets, you can enrich the initial functionality and create a web resource that is perfect for your business needs.

Pre-made photo gallery web layouts come SEO-ready and have all the necessary features for search engine optimization. So, you will be able to do some basic SEO before launching your website.

What Are the Benefits Of Using Photo Gallery In Your Website Templates?

So, why should you invest in layouts for photo gallery websites? Here are a few reasons to think over:

Ease of use: Anyone can customize ready-made website templates without touching a line of code. Thanks to the drag and drop functionality, you don’t have to be a programmer to be able to use these templates.

Saving time and money: Instead of paying for the services of a web design studio, you can purchase a template that comes with everything you need to build your website. It will take mere hours before your website goes live.

100% Responsive Design: This is extremely important if you want to attract clients using mobile search. All templates render on mobiles, tablets, and desktops without flaw!

So these are some steps that you have to follow to install photo into your blogger.

Steps to Follow:

Go to Blogger Dashboard
Go to Theme/Template Section
Click Edit HTML
Now Search for

To search anything in blogger template section press and then type term to search and press enter.

Now copy the css code provided below and add it inside



/* Reset CSS */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;a
}
html,
body {
	background: #ffffff;
	padding: 15px;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	display: inline-block;
}

/* Main CSS */
.grid-wrapper > div {
	display: flex;
	justify-content: center;
	align-items: center;
}
.grid-wrapper > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.grid-wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-auto-rows: 200px;
	grid-auto-flow: dense;
}
.grid-wrapper .wide {
	grid-column: span 2;
}
.grid-wrapper .tall {
	grid-row: span 2;
}
.grid-wrapper .big {
	grid-column: span 2;
	grid-row: span 2;
}

Again copy the below HTML code and paste it where you want to add gallery. Replace the image url with your image url.


<div class="grid-wrapper">
	<div>
		<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072821_960_720.jpg" alt="" />
	</div>
	<div>
		<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072821_960_720.jpg" alt="" />
	</div>
	<div class="tall">
		<img src="https://cdn.pixabay.com/photo/2013/11/28/10/03/river-219972_960_720.jpg" alt="">
	</div>
	<div class="wide">
		<img src="https://cdn.pixabay.com/photo/2013/11/28/10/03/river-219972_960_720.jpg" alt="" />
	</div>
	<div>
		<img src=" https://cdn.pixabay.com/photo/2014/12/08/02/59/benches-560435_960_720.jpg" alt="" />
	</div>
	<div class="tall">
		<img src="https://cdn.pixabay.com/photo/2014/12/08/02/59/benches-560435_960_720.jpg" alt="" />
	</div>
	<div class="big">
		<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" />
	</div>
	<div>
		<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" />
	</div>
	<div class="wide">
		<img src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg" alt="" />
	</div>
	<div class="big">
		<img src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg" alt="" />
	</div>
	<div class="tall">
		<img src="https://cdn.pixabay.com/photo/2017/12/15/13/51/polynesia-3021072_960_720.jpg" alt="" />
	</div>
	<div>
		<img src="https://cdn.pixabay.com/photo/2017/12/15/13/51/polynesia-3021072_960_720.jpg" alt="" />
	</div>
	<div>
		<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" />
	</div>
	<div>
		<img src="https://cdn.pixabay.com/photo/2014/12/08/02/59/benches-560435_960_720.jpg" alt="" />
	</div>
	<div>
		<img src="https://cdn.pixabay.com/photo/2014/12/08/02/59/benches-560435_960_720.jpg" alt="" />
	</div>
	<div class="wide">
		<img src="https://cdn.pixabay.com/photo/2013/11/28/10/03/river-219972_960_720.jpg" alt="" />
	</div>
	<div>
		<img src="https://cdn.pixabay.com/photo/2013/11/28/10/03/river-219972_960_720.jpg" alt="" />
	</div>
	<div>
		<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072821_960_720.jpg" alt="" />
	</div>
	<div class="wide">
		<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072821_960_720.jpg" alt="" />
	</div>
	<div>
		<img src="https://cdn.pixabay.com/photo/2013/11/28/10/03/river-219972_960_720.jpg" alt="" />
	</div>
	<div class="wide">
		<img src="https://cdn.pixabay.com/photo/2013/11/28/10/03/river-219972_960_720.jpg" alt="" />
	</div>
	<div class="big">
		<img src="https://cdn.pixabay.com/photo/2014/12/08/02/59/benches-560435_960_720.jpg" alt="" />
	</div>
	<div>
		<img src="https://cdn.pixabay.com/photo/2014/12/08/02/59/benches-560435_960_720.jpg" alt="" />
	</div>
	<div>
		<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" />
	</div>
	<div class="big">
		<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" />
	</div>
	<div class="tall">
		<img src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg" alt="" />
	</div>
	<div>
		<img src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg" alt="" />
	</div>
	<div>
		<img src="https://cdn.pixabay.com/photo/2017/12/15/13/51/polynesia-3021072_960_720.jpg" alt="" />
	</div>
	<div class="wide">
		<img src="https://cdn.pixabay.com/photo/2017/12/15/13/51/polynesia-3021072_960_720.jpg" alt="" />
	</div>
</div>

Save Theme/Template

CSS HTML

Median

How to Create Beautiful Responsive Image Gallery Using Pure HTML & CSS

What Are the Benefits Of Using Photo Gallery In Your Website Templates?

Post a Comment