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

假设我有大约250个div，使用class

滑块项

设计样式。我在css

a

中有一个响应网格，它在窗口缩放时将div包装为列/项。最小项目宽度为下面列出的

240px

我试图在一行中保持网格的响应性（nowrap水平溢出）。问题在于属性

网格模板列：重复（自动填充）

增大/缩小行b/c div超过当前窗口宽度

A

。滑块内容{
位置：相对位置；
显示：网格；
网格模板列：重复（自动填充，最小值（240px，1fr））；
溢出：隐藏；
利润率：20px0；
滚动行为：平滑；
} 
/*.slider内容>.slider项目{
最小高度：130px；
最小宽度：240px；
} */

B

。滑块内容{
显示：网格；
网格自动流：列；
栅隙：10px；
利润率：20px0；
溢出：自动；
}
.slider内容>.slider项目{
最小高度：130px；
最小宽度：240px；
}

Css

B

通过水平滚动将内容保持在一行中，但问题是它不像Css

a

我以后需要它来做多列旋转木马

---

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

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

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

不要忘记在

.slider content

或

.slider item

上设置高度

更新

我不知道如何禁用CSS网格行包装。但是，我发现了一种类似于视频的方法，但是在一行中溢出。这不是最优雅的方式，但效果很好。我没有为最多6列添加所有媒体查询，但添加它们非常简单-只需将媒体大小增加到240px，或者您希望的最小宽度，然后更改

网格自动列

值

.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%;
    }
}

---

它不像

网格模板列：repeat（auto fill

。当窗口最大化或缩小时，该行不调整列。请看，我想要可变列计数，但在一行（+overflow）中，我看到，我更新了anwser。我希望它能帮助您。