Grid Property is not working as the code is not in the grid tabular format

I am trying to built a basic portfolio for my Freecodecamp project but I cannot understand by error as to why the grid property is not working.

Here is the code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-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));
}

<!-- language: lang-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>

<!-- end snippet -->

This is the format I want my output to be in, but it isn't going in a grid:

<a href="https://i.stack.imgur.com/kggzT.png"><img src="https://i.stack.imgur.com/kggzT.png"></a>

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#projects {
  padding: 3rem 2rem;
  /* the width of most elements (by default) is
     the declared width plus the border-widths
     and the padding; this means the width of
     this element is calculated to be:
       100% of the parent's width, plus 4rem
       (2rem for each side)
     as it's 100% + 4rem there's scrolling in
     the horizontal direction which is not usually
     desired. As such - because a <section> is a
     block element by default I've commented out
     the width, in which case the browser will
     assign the padding and then use the remaining
     space as the element's size.
  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;
  /* I corrected the typo in the following line "autofit" should be
     "auto-fit," as below. Had you used your browser's developer tools
     (right click the element, "inspect element" and looked in the
     CSS properties you'd have seen "invalid value" which should have
     pointed you the correct direction to resolve the issue: */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

<!-- language: lang-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">
      <!-- I removed the </image> tags, for two reasons:
           1. the <img> element doesn't have, or require, a closing tag, and
           2. if it did it would require that closing tag to be the same as the openening tag, but with
              a '/' character as the first character, for example: `</img>` (but don't use that, no closing tag
              is required as the element is void and contains no children) -->
      <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">
      <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">
      <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">
      <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">
      <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">
      <p class='project-title'>Tribute page</p>
    </a>
  </div>
  <!-- I commented out the following surplus </div> tag that was unmatched -->
</section>

<!-- end snippet -->

References:

• CSS:
  • grid-template-columns.
  • repeat().
• HTML:
  • <img>.