Make item on CSS grid a hyperlink

Question

I am working with the CSS grid. I thought that I could make one single grid item to a hyperlink, if I wrapped it in an a tag. But I can see that this solution is not working.

The whole grid consist of around 30 grid elements made with the CSS grid. Building the grid up with flex boxes is therefore not a good solution.

Does anybody have an idea on how I can turn the whole grid column into a hyperlink?

.item2 {
  grid-row: 1 / 1;
  grid-column: 7/13;
  height: 340px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  background-image: url("https://vouzalis.dk/Static/Cms/3cb56b7b-b099-487e-a160-f288ade024f7.jpg");
}

<a href="https://www.google.com">
  <div class="item2 bg-img">
    <a href="sbp-tag">FEATURED</a>
    <a class="sbp-title light-font" href="https://www.google.com">Go to Google</a>
  </div>
</a>

Answer 1

1. You want to use grid but you use flex so change the dispaly to grid

   OR If you want to use flex use without the grid-column/row

2. Use wrap div and set href on click to demo link use cursor: pointer;

.wrap{
    cursor: pointer;
}
.item2 {
      grid-row: 1 / 1;
      grid-column: 7/13;
      height: 340px;
      display: grid;
      background-image: url("https://vouzalis.dk/Static/Cms/3cb56b7b-b099-487e-a160-f288ade024f7.jpg");
    }

<div class="wrap" onclick='location.href = "https://www.w3schools.com";'>
      <div class="item2 bg-img">
        <a href="sbp-tag">FEATURED</a>
        <a class="sbp-title light-font" href="https://www.google.com">Go to Google</a>
      </div>
</div>