<div class="sliders grid">
  <div class="gallery grid">
      <div class="photo grid" style="background-image: url(https://f.vividscreen.info/soft/2fcedcdb5d0a64fc354d7f17e004f621/Pink-Blossom-Flowers-480x320.jpg)">1</div>
      <div class="photo grid" style="background-image: url(https://www.nastol.com.ua/pic/201209/1024x768/nastol.com.ua-32997.jpg)">2</div>
      <div class="photo grid" style="background-image: url(https://wallpaperstudio10.com/static/wpdb/wallpapers/1000x563/030196.jpg)">3</div>
      <div class="photo grid" style="background-image: url(https://f.vividscreen.info/soft/6d4644a782471d7287478c1216b3523a/Pomegranate-wide-l.jpg)">4</div>
      <div class="photo grid" style="background-image: url(https://steemitimages.com/DQmf1yiv5Vvme5B3deqM5vcy35ctmnmyFUEEZt1M92W6enT/FB_IMG_1505141590951.jpg)">5</div>
      <div class="photo grid" style="background-image: url(https://www.nastol.com.ua/pic/201603/2560x1440/nastol.com.ua-167045.jpg)">6</div>
      <div class="photo grid" style="background-image: url(https://images.wallpaperscraft.ru/image/cvetok_vlazhnyy_kapli_17749_1280x720.jpg)">7</div>
    </grid>
</div>
.grid
  display: grid
  
.gallery
  grid-gap: 5px
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr
  grid-template-rows: 1fr 1fr 1fr

.photo
  min-height: 50vh
  background-size: cover
  background-position: center
  text-align: center
  align-content: center
  font-size: 20px
  font-weight: bold  
  transition: color .5s ease
  cursor: pointer

.photo:nth-child(1)
  grid-area: 1 / 1 / 4 / 4
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.