Grid 属性不起作用，因为代码不是网格表格格式

Question

我正在尝试为我的 Freecodecamp 项目构建一个基本的作品集，但我无法错误地理解为什么网格属性不起作用。这是代码 html:

<section id='projects'>
  <h2>Here are some of my Projects:</h2>
<div id="projects-grid">
  <a href="">
  <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image>
  <p class='project-title'>Tribute page</p></a>
   <a href="">
  <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image>
  <p class='project-title'>Tribute page</p></a>
    <a href="">
  <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image>
  <p class='project-title'>Tribute page</p></a>
    <a href="">
  <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image>
  <p class='project-title'>Tribute page</p></a>
    <a href="">
  <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image>
  <p class='project-title'>Tribute page</p></a>
    <a href="">
  <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image>
  <p class='project-title'>Tribute page</p></a></div>
</div></section>

CSS：

#projects{
  padding:3rem 2rem;
  width:100%;
  height:120%;
  background-color:#3c6382;
}
#projects h2{
  text-align:Center;
  text-decoration:underline;
  color:#c8d6e5;
  font-size:2rem;
}
.img{
  margin-top:4rem;
  width:40%;
  border:0.5rem solid white;
}
.project-title{
  color:white;
  font-size:1.5rem;
  margin-left:4rem; 
}
#projects-grid{
  display:grid; 
  grid-template-columns:repeat(autofit,minmax(320px,1fr));

}

type here

这是我希望我的输出格式，但它不会在网格上

Answer 1

CSS 代码看起来是正确的，但是HTML 代码中的img 标签存在语法错误。不要使用

</image>

来关闭标签，而是使用

</img>

。 这是核心代码 HTML

<section id='projects'>
  <h2>Here are some of my Projects:</h2>
  <div id="projects-grid">
    <a href="">
      <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></img>
      <p class='project-title'>Tribute page</p>
    </a>
    <a href="">
      <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></img>
      <p class='project-title'>Tribute page</p>
    </a>
    <a href="">
      <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></img>
      <p class='project-title'>Tribute page</p>
    </a>
    <a href="">
      <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></img>
      <p class='project-title'>Tribute page</p>
    </a>
    <a href="">
      <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></img>
      <p class='project-title'>Tribute page</p>
    </a>
    <a href="">
      <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></img>
      <p class='project-title'>Tribute page</p>
    </a>
  </div>
</section>