При заключении div в ссылку (a) — он пропадает, как исправить?

Question

[Вадим Жолудев]

То есть, у меня есть несколько дивов, мне нужно поставить ссылки на них.
Но при установки ссылки на див - он исчезает.
В картинке показано, что слева на месте белого пространства был див, но добавив в него ссылку, он пропал

<div class="parent">
    <a href="#"><div class="div1"> </div></a>
    <div class="div2"> </div>
    <div class="div3"> </div>
    <div class="div4"> </div>
    <div class="div5"> </div>
  </div>

.parent {
   width: 70%;
   height: 90vh;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(4, 1fr);
   grid-gap: 14px;
  margin-left: 15%;
  margin-top: 5%;
 }

 .div1 {
   grid-area: 1 / 1 / 5 / 2;
   background-image: url(../images/sand.jpg);
   background-size:cover;
 }

 .div2 {
   grid-area: 1 / 2 / 3 / 3;
   background-image: url(../images/stone1.jpg);
   background-size:cover;

 }

 .div3 {
   grid-area: 3 / 2 / 5 / 3;
   background-image: url(../images/stone3.jpg);
   background-size:cover;

 }

 .div4 {
   grid-area: 1 / 3 / 2 / 4;
   background-image: url(../images/stone2.jpg);
   background-size:cover;

 }

 .div5 {
   grid-area: 2 / 3 / 5 / 4;
   background-image: url(../images/car1.jpg);
   background-size:cover;

 }

 .div1,
 .div2,
 .div3,
 .div4,
 .div5 {

   border-radius: 30px;

 }

Comments

[Михаил]

subgrid нужен

[Вадим Жолудев]

Михаил, куда его стоит вписать? в сам див? или класс со всеми дивами?

[Михаил]

xheirt, только в ff, https://codepen.io/notiv/pen/RwKvryK
grid работает только на дочерние элементы, subgrid новая фича

[Вадим Жолудев]

Михаил, Понял, спасибо большое, всего хорошего вам

[Froggyweb]

перенеси класс div1 на ссылку :)