如何设置 1 列网格

Question

Grid 的新手，我需要一些帮助。 我想创建一个网格，在每个媒体查询中删除 1 列。 在最后一个媒体查询中，应该只有 1 列 1fr 宽，但我得到 2 列而不是发生这种情况。 知道为什么吗？ Aslo 一个解释真的会有所帮助，因为我对网格非常糟糕

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

您使用min-width限制了您最后的 @media 查询。 我删除了它，它可以工作。 现在，当您的屏幕小于 768px 时，您将获得一列。

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>