CSS 网格：根据屏幕尺寸的响应式网格

Question

这是我想要实现的目标：

在手机上

在平板电脑/iPad 和台式机上

这是我目前所拥有的。

article {
    display: grid;
    height: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    justify-items: center;
    align-items:center;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 50%;
}

section img {
  max-width: 4rem;
}

<article>
  <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
    <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
    <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
    <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
    <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
    <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
      <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
      <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
      <section><img src="https://i.pinimg.com/originals/d3/87/68/d38768f93e7acebc36b42feeb77f9978.png" alt=""></section>
  <section><img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt=""></section>
</article>

我如何确保它在桌面和 ipad 上保持 5 列（或者将来可能更多或更少） 并在它转到时将其固定为 3 列手机屏幕？

我想要屏幕之间的平滑过渡，因此不会在屏幕尺寸之间进行狡猾的跳跃。 建议/帮助将不胜感激！

Answer 1

只需为小屏幕设备创建一个不同的grid-template-columns 定义：

article {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media screen and (max-width: 480px) {
  article {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

我想要屏幕之间的平滑过渡，这样屏幕尺寸之间就不会出现狡猾的跳跃。

这将取决于浏览器如何处理。为了保证更流畅的解决方案，您将不得不求助于基于 Javascript 的解决方案（这可能很复杂，而且 imo 不值得）。