创建一个故意溢出的 CSS 网格答案

【问题标题】：Create a deliberately overflowing css grid创建一个故意溢出的 CSS 网格
【发布时间】：2021-03-10 17:05:16
【问题描述】：

我正在尝试创建一个水平滚动的小部件。很像图像轮播，但带有文本和图标。

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

为了使列大小相等，我正在查看 css-grid。例如，这使得 3 个等宽的列：

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

但是，我想知道是否有办法将网格本身限制为一列宽。所以网格是一列宽，每列当然是一列宽。

结果是 3 列布局，2 列溢出，可以隐藏。

如果不对网格本身设置“px”宽度，不确定这是否可行。

【问题讨论】：

标签： html css

【解决方案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>

如果您想处理更多列和空白，请联系：Responsive horizontal scrolling CSS Grid with fixed number of grid-items per breakpoint

【讨论】：