There is unwanted white space at the bottom of my .gallery-mosaic div. What is causing this and how can I get rid of the white space? ................................................................................................................................................................................................................................................................................................
<section class="intro">
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</nav>
<div class="inner">
<div class="content">
<h1>Tenasi Art</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</section>
<a name="about">
<div class="clearfix"></div>
<section class="left-col">
<h2>About the Photographer</h2>
<p style="text-indent:5%;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero eligendi ab quam necessitatibus. Aspernatur temporibus laudantium cum, aliquid libero, perferendis placeat illum aperiam atque doloremque, architecto molestiae voluptatibus beatae quidem ipsam. Fuga, nemo aperiam nostrum sint autem iusto praesentium deleniti rem, soluta eum voluptatibus voluptas fugiat, assumenda necessitatibus labore. Blanditiis!</p>
</section>
<section class="right-col">
<img src="#" alt="Latricia Muhammad">
</section>
<div class="clearfix"></div>
<a name="gallery"></a>
<h2>Tenasi Art Gallery</h2>
<section class="gallery-mosaic">
<div class="images">
<a href="images/img1.jpg" class="img-1">
<i class="icon ion-md-expand"></i>
</a>
<a href="images/img2.jpg" class="img-2">
<i class="icon ion-md-expand"></i>
</a>
<a href="images/img3.jpg" class="img-3">
<i class="icon ion-md-expand"></i>
</a>
<a href="images/img4.jpg" class="img-4">
<i class="icon ion-md-expand"></i>
</a>
<a href="images/img5.jpg" class="img-5">
<i class="icon ion-md-expand"></i>
</a>
<a href="images/img6.jpg" class="img-6">
<i class="icon ion-md-expand"></i>
</a>
<a href="images/img7.jpg" class="img-7">
<i class="icon ion-md-expand"></i>
</a>
<a href="images/img8.jpg" class="img-8">
<i class="icon ion-md-expand"></i>
</a>
</div>
</section>
<div class="see-all">
<a href="#">See All</a>
</div>
<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
```
```lang-css
body {
font-family:'IBM Plex Sans', sans-serif;
margin:0;
padding:0;
box-sizing: border-box;
width:100%;
}
h1,h2,h3,h4,h5,h6 {
font-weight:bolder;
}
h1{
font-size:55px;
}
h2{
font-size:44px;
}
h3{
font-size:36;
}
h4{
font-size:27;
}
h5{
font-size:20;
}
h6{
font-size:16;
}
/* START GALLERY */
.gallery-mosaic{
width:100%;
max-width:120rem;
margin:auto;
padding:0 1.5rem;
/* background-color: purple; */
}
.images{
/* background-color: green; */
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
grid-gap:1.5rem;
grid-template-areas:
'img-1 img-2 img-3 img-3'
'img-1 img-4 img-4 img-6'
'img-7 img-7 img-8 img-6'
}
.images a{
width:100%;
/* height:25rem; */
background-position: center;
background-repeat: no-repeat;
background-size:cover;
position:relative;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:rgba(255,255,255,.02);
}
.images a ion-icon{
color:rgba(255,255,255, .6);
font-size:3rem;
position:relative;
z-index:100;
padding:1rem 3rem;
border:20px solid rgba(255,255,255, .6);
border-radius:.4rem;
opacity:0;
transition:opacity .5s;
}
.images a::before{
content:'';
position:absolute;
height:100%;
width:100%;
top:0;
left:0;
background-color: rgba(0,0,0,.8);
opacity:0;
transition:opacity .5s;
}
.images a:hover i, .images a:hover::before{
opacity:1;
}
.img-1{
grid-area:img-1;
min-height:51.5rem;
background-image: url('images/img1.jpg');
}
.img-2{
grid-area:img-2;
background-image: url('images/img2.jpg');
}
.img-3{
grid-area:img-3;
background-image: url('images/img3.jpg');
}
.img-4{
grid-area:img-4;
background-image: url('images/img4.jpg');
}
.img-5{
grid-area:img-5;
background-image: url('images/img5.jpg');
}
.img-6{
grid-area:img-6;
min-height:51.5rem;
background-image: url('images/img6.jpg');
}
.img-7{
grid-area:img-7;
background-image: url('images/img7.jpg');
}
.img-8{
grid-area:img-8;
background-image: url('images/img8.jpg');
}
.see-all{
/* background-color: red; */
}
It seems this line of code is the cause of that white space:
<a href="images/img5.jpg" class="img-5">
<i class="icon ion-md-expand"></i>
</a>
I removed that line and the white space is gone. You are not using that image in the grid. There is no img-5 in your grid-template-areas.