<div class="grid-container">
      <a href="#" class="grid-item01"></a>
      <a href="#" class="grid-item02"></a>
      <a href="#" class="grid-item03"></a>
      <a href="#" class="grid-item04"></a>
      <a href="#" class="grid-item05"></a>
      <a href="#" class="grid-item06"></a>
      <a href="#" class="grid-item07"></a>
      <a href="#" class="grid-item08"></a>
      <a href="#" class="grid-item09"></a>
      <a href="#" class="grid-item10"></a>
      <a href="#" class="grid-item11"></a>
      <a href="#" class="grid-item12"></a>
    </div>
.grid-container{
        width: 500px;
        height: 300px;
        display: grid;
        grid-template-columns: repeat(4, 22%);
        grid-template-rows: repeat(3, 31%);
        column-gap: 4%;
        row-gap: 3.5%;
        background-color: aqua;
        background: url(https://i.postimg.cc/KjtjnrjR/memory-bg2.jpg) no-repeat;
      }

      .grid-item01{
        grid-column: 1/2;
        grid-row: 1/2;
      }
      .grid-item02{
        grid-column: 2/3;
        grid-row: 1/2;
      }
      .grid-item03{
        grid-column: 3/4;
        grid-row: 1/2;
      }
      .grid-item04{
        grid-column: 4/5;
        grid-row: 1/2;
      }
      .grid-item05{
        grid-column: 1/2;
        grid-row: 2/3;
      }
      .grid-item06{
        grid-column: 2/3;
        grid-row: 2/3;
      }
      .grid-item07{
        grid-column: 3/4;
        grid-row: 2/3;
      }
      .grid-item08{
        grid-column: 4/5;
        grid-row: 2/3;
      }
      .grid-item09{
        grid-column: 1/2;
        grid-row: 3/4;
      }
      .grid-item10{
        grid-column: 2/3;
        grid-row: 3/4;
      }
      .grid-item11{
        grid-column: 3/4;
        grid-row: 3/4;
      }
      .grid-item12{
        grid-column: 4/5;
        grid-row: 3/4;
      }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.