Сделать элемент в сетке CSS гиперссылкой

Question

Я работаю с сеткой CSS.Я думал, что мог бы сделать один элемент сетки для гиперссылки, если бы обернул его в тег a.Но я вижу, что это решение не работает.

Вся сетка состоит из около 30 элементов сетки, созданных с помощью сетки CSS.Поэтому построение сетки с помощью гибких блоков не является хорошим решением.

У кого-нибудь есть идеи о том, как превратить весь столбец сетки в гиперссылку?

.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. Вы хотите использовать grid , но вы используете flex, поэтому измените dispaly на grid

   ИЛИ Если вы хотите использовать flex, используйте без grid-column/row

2. Используйте wrap div и установите href в нажмите для демонстрационной ссылки используйте 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>