用于网格模板列和响应式窗口的单行容器

Question

假设我有大约 250 个样式为 slider-item 类的 div。我在 css A 中有一个响应式网格，它在窗口缩放时将 div 包装为列/项目。最小项目宽度为240px 下面列出。

https://streamable.com/l3ezfv

我试图让网格在一行中保持响应（nowrap 水平溢出）。问题是属性grid-template-columns: repeat(auto-fill..) 增加/缩小行 b/c div 超过当前窗口宽度

一个

.slider-content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
  overflow: hidden;
  margin: 20px 0;
  scroll-behavior: smooth;
} 

/* .slider-content > .slider-item {
  min-height: 130px;
  min-width: 240px;
} */

B

.slider-content {
display:grid;   
grid-auto-flow:column;  
grid-gap:10px; 
margin:20px 0;
overflow:auto;
}

.slider-content > .slider-item {
  min-height: 130px;
  min-width: 240px;
}

css B 将内容保持在水平滚动的单行中，但问题是它不像 css A 那样响应式

我稍后需要它用于多列轮播。

对 flexbox 或 slickjs 不感兴趣；使用 CSS 网格。

Answer 1

我认为这实现了你想要的：

.slider-content {
    display: grid;
    overflow-x: auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
}

不要忘记在.slider-content 或.slider-item 上设置高度。

更新

我不知道如何禁用 CSS 网格换行。但是，我找到了一种与视频类似的方式，但在一行中溢出。这不是最优雅的方式，但效果很好。我没有为最多 6 列添加所有媒体查询，但添加它们非常容易 - 只需将媒体大小增加 240 像素，或者您想要的最小宽度，然后更改 grid-auto-columns 值。

.slider-content {
    /* Same as above, before update. */
}

@media (max-width: 479px) {
    .slider-content {
        grid-auto-columns: 100%;
    }
}

@media (min-width: 480px) and (max-width: 719px) {
    .slider-content {
        grid-auto-columns: 50%;
    }
}

@media (min-width: 720px) and (max-width: 959px) {
    .slider-content {
        grid-auto-columns: 33.3%;
    }
}