How to build responsive image gallery using Grid CSS

In this article we will see how to create a responsive CSS image grid. Image galleries made by websites like Unsplash, Pinterest Etc, are made by techniques like positioning or translating the image item which is a very cumbersome task to do. You can achieve the same functionality very quickly using CSS Grids.

HTML Code:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">

<div class="container">
  <div class="grid">
    <div class="grid-post">
      <img src="https://picsum.photos/200/300?image=1" 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=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>

CSS Code:

@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;
}
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply