I'm currently learning how to utilize the grid container and have successfully created a grid with 2 images on top, 2 on the bottom, and one that stretches vertically on the left side. While I have arranged the grid as desired, I am facing an issue with a large gap between each image. Despite adjusting the grid gap and even removing it altogether, the gap remains unchanged. How can I resolve this problem?
Thank you.
.PopDestination-Header{
text-align: center;
margin: 100px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
}
.grid-item-1 {
grid-column: 1/2;
grid-row: 1/3;
}
.grid-item-2 {
grid-column: 2/3;
grid-row: 1/2;
}
.grid-item-3 {
grid-column: 3/4;
grid-row: 1/2;
}
.grid-item-4 {
grid-column: 2/3;
grid-row: 3/4;
}
.grid-item-5 {
grid-column: 3/4;
grid-row: 3/4;
}<section class="PopularDestination">
<div class="PopDestination-Header">
<h1>Popular Destination</h1>
</div>
<div class="grid-container">
<div class="grid-item-1"><img src ="Images/meric-dagli-CK_MX9mBGRo-unsplash.jpg" height="700" width="350"></div>
<div class="grid-item-2"><img src ="Images/doug-watanabe-9uiUGnGeeUo-unsplash.jpg" height="350" width="500"></div>
<div class="grid-item-3"><img src ="Images/ryan-stone-VnZMKbXrA0I-unsplash.jpg" height="350" width="500"></div>
<div class="grid-item-4"><img src ="Images/clay-elliot-3xJAVC07AYk-unsplash.jpg" height="350" width="500"></div>
<div class="grid-item-5"><img src ="Images/mike-dierken-KmA5OdUkAj8-unsplash.jpg" height="350" width="500"></div>
</div>
</section>