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

Question

假设我有大约 250 个样式为 class 的 div slider-item。我在 css 中有一个响应式网格A，它在窗口缩放时将 div 包装为列/项目。下面列出了最小项目宽度240px。我试图让网格在一行中保持响应（nowrap 水平溢出）。问题是属性grid-template-columns: repeat(auto-fill..)增长/收缩行 b/c div 超过当前窗口宽度A.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;} */乙.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;}CssB通过水平滚动将内容保持在一行中，但问题是它不像 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%;

    }

}