Trending Designs

Impressed by our work?

Hire us for exceptional web development services on Fiverr

Responsive Image Gallery using CSS Grid in 2021 | CSS Grid Responsive Image Gallery

10 June
In this CSS tutorial , we'll be using the CSS grid to create a responsive image gallery that works any size of device.

Responsive Image Gallery using CSS Grid in 2021 | CSS Grid Responsive Image Gallery | Image Gallery

In this video we will learn how to create a responsive image gallery layout using css 3 grid . This would be perfect for a website that wants to showcase some sort of work, whether it's a portfolio or gallery.


Let's Start coding... 

 

HTML


                            
                                <!DOCTYPE html>
<html lang="en">

<head>
	<title>CSS Grid Gallery</title>
</head>
<body>
	<h1>Responsive Grid Gallery using CSS</h1>
	<div class="grid-wrap">
		<ul>
			<li><img src="https://wallup.net/wp-content/uploads/2016/01/206531-animals-nature-birds.jpg"></li>
			<li><img src="https://images.all-free-download.com/images/graphiclarge/animal_bird_blue_269782.jpg"></li>
			<li><img
					src="https://w0.peakpx.com/wallpaper/598/117/HD-wallpaper-bird-branch-nature-ultra-animals-birds-nature-green-bird-leaves-branch-environment-wildlife-fauna.jpg">
			</li>
			<li><img
					src="https://images.unsplash.com/photo-1480044965905-02098d419e96?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bmF0dXJlJTIwYmlyZHxlbnwwfHwwfHw%3D&w=1000&q=80">
			</li>
			<li><img src="https://coolwallpapers.me/picsup/2825373-animals-nature-birds___animal-wallpapers.jpg"></li>
			<li><img
					src="https://wallup.net/wp-content/uploads/2016/01/206531-animals-nature-birds.jpg">
			</li>
			<li><img
					src="https://p4.wallpaperbetter.com/wallpaper/393/304/17/nature-love-birds-swans-hearts-reflections-1920x1080-animals-birds-hd-art-wallpaper-preview.jpg">
			</li>
			<li><img src="https://images.all-free-download.com/images/graphiclarge/animal_bird_blue_269782.jpg"></li>
			<li><img src="https://i.pinimg.com/736x/9c/71/18/9c71183ca0715d4bcd255aadacd20490.jpg"></li>
			<li><img src="https://i.pinimg.com/originals/30/c0/2b/30c02b76f4110df9010765517410a0f7.jpg"></li>
			<li><img
					src="https://lh3.googleusercontent.com/_KGEdihry5dSH_jFYhBpSEw74aQbA_tPolRLHvh3JHMG0EeM3oXDBK0zplPh7P59vxKFbJ-ljfx7YJhLqnx7e0_j=s900">
			</li>

		</ul>
	</div>

</body>

</html>

Let's Styling Gallery


                            
                                * {
		box-sizing: border-box;
	}

	body {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	h1 {
		text-align: center;
		font-size: 4em;
		font-family: monospace;
	}

	ul,
	li {
		list-style: none;
		padding: 0;
		margin: 10px;
	}

	.grid-wrap {
		position: relative;
		margin: 0;
		padding: 10px;
	}

	.grid-wrap ul {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(100px, auto));
		grid-auto-flow: dense;
		grid-gap: 2px;
		justify-content: center;
		margin: 0 auto;
		padding: 0;
	}

	.grid-wrap ul li {
		position: relative;
	}

	.grid-wrap ul li:nth-child(1) {
		grid-row: span 2;
		grid-column: span 4;
	}

	.grid-wrap ul li:nth-child(2) {
		grid-row: span 2;
		grid-column: span 4;
	}

	.grid-wrap ul li:nth-child(3) {
		grid-row: span 2;
		grid-column: span 5;
	}

	.grid-wrap ul li:nth-child(4) {
		grid-row: span 2;
		grid-column: span 6;
	}

	.grid-wrap ul li:nth-child(5) {
		grid-row: span 2;
		grid-column: span 3;
	}

	.grid-wrap ul li:nth-child(6) {
		grid-row: span 3;
		grid-column: span 4;
	}

	.grid-wrap ul li:nth-child(7) {
		grid-row: span 2;
		grid-column: span 4;
	}

	.grid-wrap ul li:nth-child(8) {
		grid-row: span 2;
		grid-column: span 5;
	}

	.grid-wrap ul li:nth-child(9) {
		grid-row: span 3;
		grid-column: span 4;
	}

	.grid-wrap ul li:nth-child(10) {
		grid-row: span 2;
		grid-column: span 5;
	}

	.grid-wrap ul li:nth-child(11) {
		grid-row: span 2;
		grid-column: span 4;
	}

	.grid-wrap ul img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.grid-wrap ul li:hover {
		filter: opacity(0.8);
		transition: .2s;
		cursor: pointer;
	}


Download Code Files


Share This Post :




Follow Us

Recent Post

Most Popular Post

Categories

Related Post