<div class="parent">
  <a class="link-1" href="#">
    <div class="div1"> </div>
  </a>
  <a class="link-2" href="#">
    <div class="div2"> </div>
  </a>
  <a class="link-3" href="#">
    <div class="div3"> </div>
  </a>
  <a class="link-4" href="#">
    <div class="div4"> </div>
  </a>
  <a class="link-5" href="#">
    <div class="div5"> </div>
  </a>
</div>
.parent {
   width: 70%;
   height: 90vh;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(4, 1fr);
   grid-gap: 17px;
    margin-left: 15%;
    margin-top: 5%;
 }
 .link-1 {
   grid-area: 1 / 1 / 5 / 2;
   background-image: url(https://cdn.pixabay.com/photo/2014/05/02/21/50/home-office-336377_960_720.jpg);
   background-size:cover;
 }
 .link-2 {
   grid-area: 1 / 2 / 3 / 3;
   background-image: url(https://cdn.pixabay.com/photo/2014/05/02/21/50/home-office-336377_960_720.jpg);
   background-size:cover;
 }
 .link-3 {
   grid-area: 3 / 2 / 5 / 3;
   background-image: url(https://cdn.pixabay.com/photo/2014/05/02/21/50/home-office-336377_960_720.jpg);
   background-size:cover;
 }
 .link-4 {
   grid-area: 1 / 3 / 2 / 4;
   background-image: url(https://cdn.pixabay.com/photo/2014/05/02/21/50/home-office-336377_960_720.jpg);
   background-size:cover;
 }
 .link-5 {
   grid-area: 2 / 3 / 5 / 4;
   background-image: url(https://cdn.pixabay.com/photo/2014/05/02/21/50/home-office-336377_960_720.jpg);
   background-size:cover;
 }
 .div1,
 .div2,
 .div3,
 .div4,
 .div5 {
   border-radius: 30px;
 }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.