创建一个故意溢出的css网格

Question

我正在尝试创建一个水平滚动小部件。很像一个图像旋转木马，但是用文本和图标代替。

它将有多个列，但在任何时候只有一个是可见的。其余的将有overflow: hidden。

为了使列大小相等，我正在查看css-grid。例如，这将生成3个宽度相等的列:

display: grid;
grid-auto-columns: 1fr;
grid-auto-flow:column;

然而，我想知道是否有一种方法来约束网格本身，为一列宽。所以网格是一列宽，每一列当然是一列宽。

结果是在一个3列布局，2列溢出，他们可以隐藏。

不确定如果不设置"px"设置网格本身的宽度。

Answer 1

直接使用100%

.container {
display: grid;
grid-auto-columns: 100%;
grid-auto-flow: column;
height:100px;
overflow:auto;
}
.container > div {
background:red;
box-shadow:0 0 0 2px inset #000;
}

<div class="container">
<div></div>
<div></div>
<div></div>
</div>

相关的，如果你想处理更多的列和间距:响应式水平滚动CSS网格，每个断点固定数量的网格项