<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="postList"> <div class="item1"> <div class="singlePost"> <a href="#"> <img src="https://dummyimage.com/800x400/aaa/fff" class="img-responsive" alt=""> </a> <a href="#"> <h3 class="singlePost__h3">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h3> </a> </div> </div> <div class="item2"> <div class="singlePost"> <a href="#"> <img src="https://dummyimage.com/400x260/aaa/fff" class="img-responsive" alt=""> </a> <a href="#"> <h3 class="singlePost__h3">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h3> </a> </div> </div> <div class="item3"> <div class="singlePost"> <a href="#"> <img src="https://dummyimage.com/400x260/aaa/fff" class="img-responsive" alt=""> </a> <a href="#"> <h3 class="singlePost__h3">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h3> </a> </div> </div> <div class="item4"> <div class="singlePost"> <a href="#"> <img src="https://dummyimage.com/400x260/aaa/fff" class="img-responsive" alt=""> </a> <a href="#"> <h3 class="singlePost__h3">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h3> </a> </div> </div> <div class="item5"> <div class="singlePost"> <a href="#"> <img src="https://dummyimage.com/400x260/aaa/fff" class="img-responsive" alt=""> </a> <a href="#"> <h3 class="singlePost__h3">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h3> </a> </div> </div> </div> </div> </div> </div>

.postList{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .postList> div { background-color: #fff; } .postList .item1 { grid-column: 1 / 3; grid-row: span 2; background-color: #000; } .singlePost .singlePost__h3{ font-weight: 700; font-size: 16px; line-height: 22px; margin-top: 5px; margin-bottom: 5px; color: #333; } .img-responsive{ max-width: 100%; }