【问题标题】：The last thumbnail picture in CSS grid doesn't show upCSS 网格中的最后一个缩略图不显示
【发布时间】：2022-11-13 12:39:35
【问题描述】：

<!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>

```

#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;
    }

我正在根据本教程编写此页面：https://www.youtube.com/watch?v=dkLpo4shS6c&t=3870s IDK 我忽略了什么=（我正在制作一个图片库页面，但网格中的最后一张图片没有显示。

我花了几个小时试图找出问题所在，但我卡住了。

我将衷心感谢您的帮助。

【问题讨论】：

标签： html css css-grid

【解决方案1】：

希望这可以帮助！我看到你在第 7 张图片中加载的一个小错误。

它需要是：

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

如果您将其与您的代码进行比较，则会发现img 前面缺少/。我在您的 HTML 文件中发现了另一个小错误。您不会关闭标题标签之前的最后一个元标签。您缺少>。所以应该是：

<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

【讨论】：

非常感谢！都是因为我的心不在焉（
你真的帮了我大忙！