项目宽度等于其内容的网格水平滚动

Question

如何使用 css 网格制作一个容器，其项目的水平滚动其项目的宽度等于其内容（如max-content ）。

我试过这个

display: grid;
grid-template-columns: repeat('dynamic value eq to no. of items', max-content);
height: 100%;
gap: 10px;

这不起作用，我想避免使用max-content因为我读到浏览器支持不多。

Answer 1

您可以使用grid-auto-flow和grid-auto-columns来实现水平滚动。 然后利用minmax()来指定每个网格项的大小。 使用最小值8rem （或您选择的其他值）和最大值auto来替换max-content因为浏览器不完全支持该大小调整关键字。

使用auto作为最大值与使用max-content相同。 作为最小值，它表示占据网格轨道的网格项目的最大最小尺寸（由 min-width/min-height 指定）。 最小最大值（） - MDN

 .grid { display: grid; height: 100%; gap: 10px; grid-auto-columns: minmax(8rem, auto); grid-auto-flow: column; overflow-x: scroll; }.blue { background: lightblue; height: 8rem; /* height: auto; use auto to allow the content to determine grid items height */ }

 <section class="grid"> <div class="blue">1</div> <div class="blue">2</div> <div class="blue">3</div> <div class="blue">4</div> <div class="blue">5</div> <div class="blue">6</div> <div class="blue">7</div> <div class="blue">8</div> </section>