創建一個故意溢出的 css 網格

Question

我正在嘗試創建一個水平滾動的小部件。 很像圖像輪播，但帶有文本和圖標。

它將有多個列，但任何時候只有一個可見。 rest 將有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 Grid with fixed number of grid-item per breakpoint