html - grid-template-columns not working as expected. Getting blank spaces in some rows

Question

When I do grid-template-columns: repeat(2, 1fr); I get two images in the first row then the following row I get 1 image repeated in a frame with an empty space on the right on the same frame where I'm supposed to have the second image. How do I fix that to get 2 images in each frame when @media(max-width:990px) is true? It's all working fine except for the above explained problem.

img {
  width: 100%;
}

.card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  background: #101010;
  margin-bottom: 1rem;
}

.card img {
  height: auto;
}

@media(max-width:600px) {
  .card {
    display: flex;
  }
}

@media(max-width:990px) {
  .card {
    grid-template-columns: repeat(2, 1fr);
  }
}

<main class="container">
  <section class="card">
    <img src="images/pic01.jpg" alt="" />
    <img src="images/pic02.jpg" alt="" />
    <img src="images/pic03.jpg" alt="" />
  </section>

  <section class="card">
    <img src="images/pic04.jpg" alt="" />
    <img src="images/pic05.jpg" alt="" />
    <img src="images/06.jpg" alt="" />
  </section>

  <section class="card">
    <img src="images/pic07.jpg" alt="" />
    <img src="images/pic08.jpg" alt="" />
    <img src="images/pic09.jpg" alt="" />
  </section>
</main>

question from:https://stackoverflow.com/questions/65599428/grid-template-columns-not-working-as-expected-getting-blank-spaces-in-some-rows

Answer 1

Looks like the problem is duplicated <section> tags in your HTML. Try this instead. Rate and accept the answer if you find it helpful!

<main class="container">
    <section class="card">
        <img src="https://picsum.photos/200/300" alt="" />
        <img src="https://picsum.photos/200/300" alt="" />
        <img src="https://picsum.photos/200/300" alt="" />

        <img src="https://picsum.photos/200/300" alt="" />
        <img src="https://picsum.photos/200/300" alt="" />
        <img src="https://picsum.photos/200/300" alt="" />
        
        <img src="https://picsum.photos/200/300" alt="" />
        <img src="https://picsum.photos/200/300" alt="" />
        
    </section>    
</main>