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

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