响应式水平滚动CSS网格，每个断点具有固定数量的网格项

Question

问题：CODEPEN

如何使用CSS Grid设计一个网格来制作一个Carousel，它的网格项响应固定数量的网格列，每个断点会有所不同？

问题：网格项在响应断点上没有按预期进行缩放。网格项目达不到规格。

请查看video我希望网格项目按断点进行缩放：https://imgur.com/070Zwve

背景

我问过一个关于如何使用css网格使网格项水平流动的上一个问题：

Grid CSS container that scrolls horizontally when children use grid-column?

最后，我得到的代码适用于桌面，但不适用于任何其他断点：

CSS：

.section {
  width: 100%;
  display: block;
  background: red;
  box-sizing: border-box;
  padding: 40px 24px;

  @media screen and (min-width: 600px) and (max-width: 1139px) {
    background: orange;
    padding: 56px 48px;
  }

  @media screen and (min-width: 1140px) {
    padding: 64px 48px;
    background: green;
  }
}

.container {
  margin: 0 auto;
  background: rgba(244,244,244, .25);
  max-width: 599px;


  @media screen and (min-width: 600px) and (max-width: 1139px) {
    max-width: 1039px;
    background: rgba(244,244,244, .25);
  }

  @media screen and (min-width: 1140px) {
    max-width: 1032px;
    background: rgba(244,244,244, .25);
  }
}

.samba-grid {
  display: grid;
  background: inherit;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  grid-auto-columns: minmax(55px, 1fr);
  grid-gap: 24px;

  @media screen and (min-width: 600px) and (max-width: 1139px)  {
    grid-auto-columns: minmax(44px, 1fr);
    grid-gap: 48px;
  }

  @media screen and (min-width: 1140px) {
    grid-auto-columns: minmax(42px, 1fr);
    grid-gap: 48px;
  }
}


.element {
  display: grid;
  background: rgba(0,0,0,.3);
  grid-column: span 3;
  grid-row-start: 2; // REMOVE THIS

  @media screen and (min-width: 600px) and (max-width: 1139px) {
    grid-column: span 3;
  }

  @media screen and (min-width: 1140px) {
    grid-column: span 4;
  }
}
.element img {
  width: 100%;
}

HTML：

<section class="section">
  <div class="container">
    <div class="samba-grid">
 <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>

    </div>


  </div>
</section>

^注意此视频显示行中的网格项堆栈不会水平滚动。

Answer 1

您可以将grid-auto-columns定义为百分比以控制此操作。公式应为(100% - (N-1)*Gap)/N，其中N是您要显示的元素数：

以下是3个断点的简化示例：

.grid {
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns:calc((100% - 2*10px)/3); /*3 items visible*/
  grid-gap:10px;
  margin:10px;
  max-width:800px;
  overflow:auto;
}
img {
  max-width:100%;
}

@media all and (max-width:800px) {
.grid {
  grid-auto-columns:calc((100% - 5px)/2); /*two items visible*/
  grid-gap:5px;
 }
}

@media all and (max-width:400px) {
.grid {
  grid-auto-columns:100%; /*one item visible*/
  grid-gap:5px;
 }
}

<div class="grid">
 <img src="https://picsum.photos/500/500?image=0">
 <img src="https://picsum.photos/500/500?image=0">
 <img src="https://picsum.photos/500/500?image=0">
 <img src="https://picsum.photos/500/500?image=0">
 <img src="https://picsum.photos/500/500?image=0">
 <img src="https://picsum.photos/500/500?image=0">
 <img src="https://picsum.photos/500/500?image=0">
 <img src="https://picsum.photos/500/500?image=0">
 <img src="https://picsum.photos/500/500?image=0">
</div>