如何设置1列网格

Question

Grid的新手，我需要一些帮助。 我想创建一个网格，其中每个媒体查询都删除了1列。在最后一个媒体查询上，应该只有1列宽1fr的列，但不是那样，我得到2列。知道为什么吗？ Aslo的解释真的很有帮助，因为我对网格非常不好 HTML

      <article class="wrapper" id="rd-wrapper">
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum repellendus iusto dolor, itaque odio maiores nam ad vero deserunt porro, soluta sit velit a accusamus.</p>
    </section>
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eos eum, iusto. Earum inventore, ratione rem fuga harum quia, sit id officiis nesciunt sunt porro? Aliquam, fugit tenetur excepturi quae, dolore odit cum ullam? Deserunt quod eligendi atque. Harum perferendis modi, minima necessitatibus fugit quam dolores cupiditate corrupti eum iusto?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum repellendus iusto dolor, itaque odio maiores nam ad vero deserunt porro, soluta sit velit a accusamus.</p>
    </section>
    <img src="images\logo.png" alt="">
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eos eum, iusto. Earum inventore, ratione rem fuga harum quia, sit id officiis nesciunt sunt porro? Aliquam, fugit tenetur excepturi quae, dolore odit cum ullam? Deserunt quod eligendi atque. Harum perferendis modi, minima necessitatibus fugit quam dolores cupiditate corrupti eum iusto?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum repellendus iusto dolor, itaque odio maiores nam ad vero deserunt porro, soluta sit velit a accusamus.</p>
    </section>
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum repellendus iusto dolor, itaque odio maiores nam ad vero deserunt porro, soluta sit velit a accusamus.</p>
    </section>
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eos eum, iusto. Earum inventore, ratione rem fuga harum quia, sit id officiis nesciunt sunt porro? Aliquam, fugit tenetur excepturi quae, dolore odit cum ullam? Deserunt quod eligendi atque. Harum perferendis modi, minima necessitatibus fugit quam dolores cupiditate corrupti eum iusto?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum repellendus iusto dolor, itaque odio maiores nam ad vero deserunt porro, soluta sit velit a accusamus.</p>
    </section>
    <img src="images\logo.png" alt="">
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eos eum, iusto. Earum inventore, ratione rem fuga harum quia, sit id officiis nesciunt sunt porro? Aliquam, fugit tenetur excepturi quae, dolore odit cum ullam? Deserunt quod eligendi atque. Harum perferendis modi, minima necessitatibus fugit quam dolores cupiditate corrupti eum iusto?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum repellendus iusto dolor, itaque odio maiores nam ad vero deserunt porro, soluta sit velit a accusamus.</p>
    </section>
  </article>

CSS

#rd-wrapper{
  grid-gap: 25px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: min-width="200px";
}
section{
  padding: 10px;
  border: 1px gray solid;
}

@media screen and (min-width: 1366px) and (max-width: 1920px){
  .wrapper{
    width: 1024px;
    flex-direction: row;
  }
  #rd-wrapper{
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 1024px) and (max-width: 1365px){
  .wrapper{
    width: 1024px;
    flex-direction: row;
  }
  #rd-wrapper{
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 769px) and (max-width: 1023px){
  .wrapper{
    width: 769px;
    flex-direction: row;
  }
  #rd-wrapper{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 320px) and (max-width: 768px){
  .wrapper{
    width: 320px;
    flex-direction: row;
  }
  #rd-wrapper{
    grid-template-columns: 1fr;
  }
}