[英]Horizontal scroll of grid with items width equal to its content
How do I make a container with horizontal scroll of its items with an item's width equal to its content(like max-content
) using css grid.如何使用 css 网格制作一个容器,其项目的水平滚动其项目的宽度等于其内容(如max-content
)。
I tried this我试过这个
display: grid;
grid-template-columns: repeat('dynamic value eq to no. of items', max-content);
height: 100%;
gap: 10px;
This does not work and I want to avoid using max-content
because I read there is not much browser support.这不起作用,我想避免使用max-content
因为我读到浏览器支持不多。
You could use grid-auto-flow
and grid-auto-columns
to achieve the horizontal scroll.您可以使用grid-auto-flow
和grid-auto-columns
来实现水平滚动。 Then utilize minmax()
to specify each grid items size.然后利用minmax()
来指定每个网格项的大小。 With a minimum value of 8rem
(or another value of your choosing) and a maximum value of auto
to replace max-content
since there isn't full browser support for that sizing keyword.使用最小值8rem
(或您选择的其他值)和最大值auto
来替换max-content
因为浏览器不完全支持该大小调整关键字。
Using auto
as the maximum value is identical to using max-content
.使用auto
作为最大值与使用max-content
相同。 As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.作为最小值,它表示占据网格轨道的网格项目的最大最小尺寸(由 min-width/min-height 指定)。 minmax() - MDN最小最大值() - 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.