Сделал небольшой grid и надо было элементы сделать ссылками, прописал для ссылок display: grid; и все элементы полностью изменились. По началу, когда я не прописал еще для дивов ссылки было все как надо, после установки тегов ссылок все дивы пропали, прописал для ссылок display:grid; и вот что получилось
Это стандартное расположение:
Это после установки display:grid:
<div class="parent">
<a href="#">
<div class="div1"> </div>
</a>
<a href="#">
<div class="div2"> </div>
</a>
<a href="#">
<div class="div3"> </div>
</a>
<a href="#">
<div class="div4"> </div>
</a>
<a href="#">
<div class="div5"> </div>
</a>
</div>
.parent {
width: 70%;
height: 90vh;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 17px;
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;
}
.parent a{
display: grid;
}