Grid - Primer código

HTML

    <div class="grid-container">

        <div class="item1" id="resumen">

            <a href="https://unsplash.com/es" id="enlace"></a>

        </div>

        <div class="item2">

            <a href="https://www.w3schools.com/js/js_intro.asp" id="enlace"></a>

        </div>

        <div class="item3">spidder</div>  

        <div class="item4">fissh</div>

        <div class="item5">birdds</div>

        <div class="item6">repptile</div>

        <div class="item7">innsect</div>

        <div class="item8">gusann</div>

       

      </div>

CSS

#enlace{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 10;

  }

 

  .item1 { grid-area: mammif; position: relative;}

  .item2 { grid-area: star; position: relative;}

  .item3 { grid-area: spidder; }

  .item4 { grid-area: fissh; }

  .item5 { grid-area: birdds; }

  .item6 { grid-area: repptile; }

  .item7 { grid-area: innsect; }

  .item8 { grid-area: gusann; }

 

  .grid-container {

    display: grid;

    grid-template-areas:

      'mammif  star spidder '

      'mammif  fissh fissh '

      'birdds  birdds repptile '

      'innsect gusann repptile ';

    gap: 10px;

    padding: 10px;

    background-color: blue;

    height: 100vh;

  }

 

  .grid-container > div {

    background-color: rgb(255, 0, 0);

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

  }

  .grid-container > div:first-child{

    background-image: url(https://c.tenor.com/D0mMDlj9g8AAAAAd/wolf-love.gif);

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;  

  }

  .grid-container > div:nth-child(2){

    background-image: url(https://j.gifs.com/qj6g1y@small.gif);

    background-position: top;

    background-repeat: no-repeat;

    background-size: cover;  

  }