Is the HTML code in a grid tabular format, causing the Grid Property to not work?

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

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