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

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

I'm coding this page according to this tutorial:https://www.youtube.com/watch?v=dkLpo4shS6c&t=3870s IDK what I've overlooked=( I'm making an image gallery page and the last picture in the grid doesn't show up.

I've spent hours trying to locate the problem, but I 've stuck.

I would really appreciate your help.

CodePudding user response：

Hope this helps! I see a small mistake where you load in the 7th image.

It needs to be:

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

If you compare it to your code, there is a / missing infront of img. I spotted another small mistake in your HTML file. You don't close off the last meta tag before the title tag. You are missing a >. So it should be:

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