CSS Grid中最后一张缩略图无法显示的问题求助

我跟着教程编写图片画廊页面，但CSS Grid布局里的最后一张缩略图（img7）无法显示，已经花了几小时排查还是解决不了，附上相关代码：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name ='viewport' content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"
<title>Document</title>
<link rel="stylesheet" href = 'css/reset.css'>
<link rel="stylesheet" href = 'css/main.css'>
<link rel="stylesheet" href = 'css/gallery.css'>

</head>
<body>
<header id="header-main">
<nav class="wrapper-main">
<a href = '#'><img scr ='img/logo' alt = 'BaileyDownsLogo'></a>
    <ul>
<li> <a href = "">News</a></li>
<li> <a href = "">Ginger Snaps Photos</a></li>
<li> <a href = "">Emily Perkins</a></li>
<li> <a href = "">Katharine Isabelle</a></li>
<li> <a href = "">Register</a></li>
<li> <a href = "">Contacts</a></li>
<li> <a href = "">Forum</a></li>

    </ul>
 </nav>

</header>

<section id = 'index-gallery' class="wrapper-gallery">

<p>Life in Bailey Downs</p>
<h2>Ginger Snaps Photos</h2>
<div class='gallery-img img1'>
<div><a href=#>Brigitte Fitzgerald</a></div>
</div>
<div class='gallery-img img2'>
<div><a href="#">Brigitte Fitzgerald</a></div>
</div>
<div class='gallery-img img3'>
<div><a href="#">Brigitte Fitzgerald</a></div>
</div>
<div class='gallery-img img4'>
<div><a href="#">Brigitte Fitzgerald</a></div>
</div>
<div class='gallery-img img5'>
<div><a href="#">Brigitte Fitzgerald</a></div>
</div>
<div class='gallery-img img6'>
 <div><a href="#">Brigitte Fitzgerald</a></div>
</div>
 <div class='gallery-img img7'>
 <div><a href="#">Brigitte Fitzgerald</a></div>
</div>

 </section>
 <script src="js/gallery.js"></script>

 </body>

 enter code here</html>

CSS代码 #

#index-gallery {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 10px;
    grid-template-areas: 
    'gallery-p gallery-p gallery-p gallery-p'
    'gallery-h2 gallery-h2 gallery-h2 gallery-h2'
    'img1 img2 img3 img4'
    'img5 img6 img3 img7';


}

#index-gallery .gallery-img {
   width: 100%;
   height:300px;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   cursor: pointer;

}

#index-gallery p {
    
    grid-area: gallery-p;
    
    
 }

 #index-gallery h2 {
    
    grid-area: gallery-h2;
    
    
 }



#index-gallery .img1 {
    
    grid-area: img1;
    background-image: url('../img/thumbs/img1.jpg');
     }

 #index-gallery .img2 {
    
    grid-area: img2;
    background-image: url('../img/thumbs/img2.jpg');
     }


 #index-gallery .img3 {
    
    grid-area: img3;
    background-image: url('../img/thumbs/img3.jpg');
    height:610px;
    }

 #index-gallery .img4 {
    
    grid-area: img4;
    background-image: url('../img/thumbs/img4.jpg');
    }


 #index-gallery .img5 {
    
    grid-area: img5;
    background-image: url('../img/thumbs/img5.jpg');
    }

 #index-gallery .img6 {
    
    grid-area: img6;
    background-image: url('../img/thumbs/img6.jpg');
    }

 #index-gallery .img7 {
    
    grid-area: img7;
    background-image: url('..img/thumbs/img7.jpg');
    height:110px;
    }

最后一张缩略图无法显示主要有两个问题：

1. 背景图片路径错误
   img7的background-image路径写成了url('..img/thumbs/img7.jpg')，正确路径应为url('../img/thumbs/img7.jpg')——..和img之间缺少斜杠，导致浏览器无法定位到图片文件。

2. 高度设置过小
   img3跨了两行（总高度为300px+10px间隙+300px=610px），img7所在行的高度由img3决定，但img7被设置为110px，远小于行高，导致图片显示区域被压缩。将img7的高度调整为300px，即可和同排的img5、img6高度匹配，正常显示。

修正后的img7 CSS代码：

#index-gallery .img7 {
    grid-area: img7;
    background-image: url('../img/thumbs/img7.jpg');
    height:300px;
}

另外还有两个不影响图片显示但建议修正的小问题：

• HTML中<meta http-equiv="X-UA-Compatible" content="ie=edge"未闭合，需添加>
• 头部logo的img标签里scr是拼写错误，应为src

内容的提问来源于stack exchange，提问作者Сергей Филимонов