How To Build a Responsive Image gallery using Grid CSS

0
5

Build Pure css responsive image gallery using grid css. This article examines a technique that we can use to take full control of the distance between grid columns. To demonstrate this, I’ll use the example of a responsive image gallery.

Step 1: HTML

<div class="grid">
<div class="grid-post">
<img src="https://picsum.photos/200/300?image=1" alt="">
<div class="caption">
<div class="price">50$</div>
<h2 class="title">Post Title</h2>
<ul class="social">
<il><a href=""><i class="fab fa-facebook"></i></a></il>
<il><a href=""><i class="fab fa-twitter-square"></i></a></il>
<il><a href=""><i class="fab fa-youtube-square"></i></a></il>
<il><a href=""><i class="fab fa-pinterest-square"></i></a></il>
</ul>
<ul class="rating">
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="far fa-star"></i></a></li>
</ul>
</div>
</div>
<div class="grid-post">
<img src="https://picsum.photos/200/300?image=2" alt="">
<div class="caption">
<h2 class="title">Post Title</h2>
<ul class="social">
<il><a href=""><i class="fab fa-facebook"></i></a></il>
<il><a href=""><i class="fab fa-twitter-square"></i></a></il>
<il><a href=""><i class="fab fa-youtube-square"></i></a></il>
<il><a href=""><i class="fab fa-pinterest-square"></i></a></il>
</ul>
<ul class="rating">
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="far fa-star"></i></a></li>
</ul>
</div>
</div>
<div class="grid-post">
<img src="https://picsum.photos/200/300?image=3" alt="">
<div class="caption">
<h2 class="title">Post Title</h2>
<ul class="social">
<il><a href=""><i class="fab fa-facebook"></i></a></il>
<il><a href=""><i class="fab fa-twitter-square"></i></a></il>
<il><a href=""><i class="fab fa-youtube-square"></i></a></il>
<il><a href=""><i class="fab fa-pinterest-square"></i></a></il>
</ul>
<ul class="rating">
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="far fa-star"></i></a></li>
</ul>
</div>
</div>
<div class="grid-post">
<img src="https://picsum.photos/200/300?image=4" alt="">
<div class="caption">
<h2 class="title">Post Title</h2>
<ul class="social">
<il><a href=""><i class="fab fa-facebook"></i></a></il>
<il><a href=""><i class="fab fa-twitter-square"></i></a></il>
<il><a href=""><i class="fab fa-youtube-square"></i></a></il>
<il><a href=""><i class="fab fa-pinterest-square"></i></a></il>
</ul>
<ul class="rating">
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="far fa-star"></i></a></li>
</ul>
</div>
</div>
<div class="grid-post">
<img src="https://picsum.photos/200/300?image=5" alt="">
<div class="caption">
<h2 class="title">Post Title</h2>
<ul class="social">
<il><a href=""><i class="fab fa-facebook"></i></a></il>
<il><a href=""><i class="fab fa-twitter-square"></i></a></il>
<il><a href=""><i class="fab fa-youtube-square"></i></a></il>
<il><a href=""><i class="fab fa-pinterest-square"></i></a></il>
</ul>
<ul class="rating">
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="far fa-star"></i></a></li>
</ul>
</div>
</div>
<div class="grid-post">
<img src="https://picsum.photos/200/300?image=6" alt="">
<div class="caption">
<h2 class="title">Post Title</h2>
<ul class="social">
<il><a href=""><i class="fab fa-facebook"></i></a></il>
<il><a href=""><i class="fab fa-twitter-square"></i></a></il>
<il><a href=""><i class="fab fa-youtube-square"></i></a></il>
<il><a href=""><i class="fab fa-pinterest-square"></i></a></il>
</ul>
<ul class="rating">
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="far fa-star"></i></a></li>
</ul>
</div>
</div>
<div class="grid-post">
<img src="https://picsum.photos/200/300?image=7" alt="">
<div class="caption">
<h2 class="title">Post Title</h2>
<ul class="social">
<il><a href=""><i class="fab fa-facebook"></i></a></il>
<il><a href=""><i class="fab fa-twitter-square"></i></a></il>
<il><a href=""><i class="fab fa-youtube-square"></i></a></il>
<il><a href=""><i class="fab fa-pinterest-square"></i></a></il>
</ul>
<ul class="rating">
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="far fa-star"></i></a></li>
</ul>
</div>
</div>
<div class="grid-post">
<img src="https://picsum.photos/200/300?image=8" alt="">
<div class="caption">
<h2 class="title">Post Title</h2>
<ul class="social">
<il><a href=""><i class="fab fa-facebook"></i></a></il>
<il><a href=""><i class="fab fa-twitter-square"></i></a></il>
<il><a href=""><i class="fab fa-youtube-square"></i></a></il>
<il><a href=""><i class="fab fa-pinterest-square"></i></a></il>
</ul>
<ul class="rating">
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="fas fa-star"></i></a></li>
<li><a href=""><i class="far fa-star"></i></a></li>
</ul>
</div>
</div>
</div>
</div>

STEP 2: CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #f2f2f2;
font-family: "Roboto", Arial, sans-serif;
font-weight: 100;
}
li{
list-style-type: none;
}
a, p, h2{
text-decoration: none;
font-family: "Roboto", Arial, sans-serif;
font-weight: 100;
color: #fff;
}
.container{
max-width: 80%;
margin: 10px auto;
}
.grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 10px;
}
.grid-post{
background-color: #fff;
padding: 10px;
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.grid-post img{
width: 100%;
height: 100%;
}
.caption{
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
}
.caption h2.title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transition: .3s;
}
.caption:hover h2.title{
padding: 10px;
}
ul.social{
position: absolute;
bottom: 10%;
left: 5%;
}
ul.social li{
padding: 5px;
}
ul.social li a{
font-size: 1.2rem;
}
ul.social li a:hover{
transform: scale(1.2);
}
ul.rating{
position: absolute;
bottom: 10%;
right: 10%;
}
ul.rating li{
display: inline-block;
}
Video Tutorial Demo Download

LEAVE A REPLY

Please enter your comment!
Please enter your name here