<!-- CSS Grid -->
<section class="css-grid">
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/o8C6UFpqC4s/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/CBOnLA41Tto/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/8mqOw4DBBSg/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/UW_gRafMxE0/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/NIBKggQ-bVM/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/Ws92xzbSris/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/_7ijJz9nZmY/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/SxiWUpGLaZM/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/9SW9IvKD9OY/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/W5XTTLpk1-I/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/c0ViYpsmUrg/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/ucYWe5mzTMU/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/_3l5B_4E_u0/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/PaFUKopuirM/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/TEvrd6ajvrY/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/cUGa_uRs9AE/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/KSLUQ2-equ0/900x900');"></figure>
    </a>
  </article>
    <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/wkU2vEIpukA/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/Ri4BxJLZ1Dk/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/mP6ZKokr7Rw/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/i2ex6BUcK1c/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/VxUEI9fOZSs/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/Qymo-vdiwK4/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/Z-Y6I45f9kQ/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/ym96FAhQ8o4/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/aeURop_aIfw/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/VuPIUePS_vU/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/hsS6jTr-pns/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/pQ7GIGO6esE/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/-xOHLRUW4k8/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/bmS3th_-BIg/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/Lpqg7ypu2B4/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/MpT5DPQIOH8/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/4cgzBvQgdMc/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/6Wad1bIYQ94/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/tK67jI9G398/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/46Sg95vwWdM/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/sZnRKLItmwo/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/KvTOwKoji7g/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/rBWfxlNJ9Rk/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/4BN81q7DXvs/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/co4UlJ5q9WU/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/awbWc1K-BCc/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/YJxAy2p_ZJ4/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/KsdgjODuJQE/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/tMvuB9se2uQ/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/nWkMhTo8Wa4/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/Pi7R19E3_QQ/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/kIE6mAtDTsI/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/-KLKu_pruJ4/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/RD_9ss_n2Y0/900x900');"></figure>
    </a>
  </article>
    <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/6tedMQIJpNI/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/xmGkzY--Fgg/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/-5rA4DRrEXU/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/HnWlli4ZZRI/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/HALe2SmkWAI/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/KvTOwKoji7g/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/gYbHzsGhfuQ/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/suaBxarUnyo/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/BgrJ7KBikgU/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/QlsQbLXVpuU/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/xFTNsGW1isI/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/Jf5vFuEwIYA/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/HnUHOBuJ7s4/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/w5Z_lEWYirI/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/pPA5ActWLLI/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/TEYrLTKKMSg/900x900');"></figure>
    </a>
  </article>
  <article>
    <a class="css-grid__link" href="#">
      <figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/rC29LgEbTjU/900x900');"></figure>
    </a>
  </article>
</section>
//
// Variables / Config
//
$mq-xsmall: 640px;
$mq-small: 768px;
$mq-med: 1024px;
$mq-large: 1440px;
$mq-xlarge: 1840px;

//
// Base
//
*, 
*:before, 
*:after {
  box-sizing: border-box;
}

body {
  height: 100%;
  width: 100%;
}

//
// Media
//
figure {
  margin: 0;
}

.absolute-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  
  height: 100%;
  width: 100%;
  
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  transition: transform 300ms ease;
}

//
// Components
//
.css-grid {
  display: block;

  &:after {
    content: "";
  
    display: table;
    clear: both;
  }

  @supports (display: grid) {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: 1fr;
    width: 100%;

    &:after {
      content: none;
    }

    @media (min-width: $mq-xsmall) {
      grid-template-columns: repeat(2, 1fr); 
    }
    
    @media (min-width: $mq-med) {
      grid-template-columns: repeat(4, 1fr);
    }
    
    @media (min-width: $mq-xlarge) {
      grid-template-columns: repeat(5, 1fr);
    }
  }
  
  & > article {
    float: left;
    width: 100%;

    @media (min-width: $mq-xsmall) {
      width: 50%;
    }
    
    @media (min-width: $mq-xsmall) and (max-width: ($mq-small - 1px)) {
      
      &:nth-child(17n + 1) {
        width: 100%;
      }
    }
    
    @media (min-width: $mq-med) {
      width: 25%;
      
      &:nth-child(34n + 1) {
        width: 50%;
      }
    }
    
    @media (min-width: $mq-med) and (max-width: ($mq-xlarge - 1px)) {
      
      &:nth-child(34n + 20) {
        float: right;
        width: 50%;
      }
    }
    
    @media (min-width: $mq-xlarge) {
      width: 20%;

      &:nth-child(34n + 1) {
        width: 40%;
      }
      
      &:nth-child(34n + 21) {
        float: right;
        width: 40%;
      }
    }

    @supports (display: grid) {
      float: none;
      width: auto;
      
      @media (min-width: $mq-xsmall) and (max-width: ($mq-small - 1px)) {
      
        &:nth-child(17n + 1) {
          grid-column-end: span 2;
          grid-row-end: span 2; 
        }
      }
      
      @media (min-width: $mq-med) {
        
        &:nth-child(34n + 1) {
          grid-column-end: span 2;
          grid-row-end: span 2; 
          width: auto;
        }
      }
      
      @media (min-width: $mq-med) and (max-width: ($mq-xlarge - 1px)) {
        
        &:nth-child(34n + 20) {
          grid-column-start: 3;
          grid-column-end: span 2;
          grid-row-end: span 2;
          width: auto;
        }
      }
      
      @media (min-width: $mq-xlarge) {
        
        &:nth-child(34n + 1) {
          width: auto;
        }

        &:nth-child(34n + 21) {
          grid-column-start: 4;
          grid-column-end: span 2;
          grid-row-end: span 2; 
          width: auto;
        }
      }
    }
  }
  
  &__link {
    position: relative;
    
    display: block;

    overflow: hidden;
    
    &:before,
    &:after {
      content: "";
    }
    
    &:before {
      display: block;
      padding-top: 100%;
    }
    
    &:after {
      position: absolute;
      top: 0;
      left: 0;
      
      height: 100%;
      width: 100%;
      
      background-color: #080808;
      opacity: 0;
      transition: opacity 300ms ease;
    }
    
    &:hover {
      
      &:after {
        opacity: 0.3;
      }
      
      .absolute-bg {
        transform: scale(1.1);
      }
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.