如何设置 1 列网格

Question

new to Grid and I need some help. I want to create a grid that removed 1 column with every media query. On the last media query there should be only 1 column 1fr wide but rather than that happening I get 2 columns. Any idea why? Aslo an explanation would really help as I am very bad with grid

HTML and 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; } }

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

Answer 1

You limited your last @media query with min-width . I removed it, and it works. Now, when you have screen smaller than 768px, you will get one column.

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 (max-width: 768px) {
  .wrapper {
    width: 320px;
    flex-direction: row;
  }
  #rd-wrapper {
    grid-template-columns: 1fr;
  }
}

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>