.index-tous-metier-container {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));
overflow-x:hidden;
}
@media(max-width:1000px){
.index-tous-metier-container{
grid-template-columns: repeat(3,1fr);
}
}
<asp:Repeater ID="..." runat="server" OnItemDataBound="..._ItemDataBound">
<ItemTemplate>
<div class='index-tous-metier-container dalle-not-select' id="...." runat="server">
<div class="index-tous-metier-container-body">.....</div>
</ItemTemplate>
</asp:Repeater>
我有这个CSS类，第一个是让我的网格响应，但是@1000px我希望它滚动并且不换行，所以这就是我重复3的原因， 现在的问题是有时我有 3 个项目，有时更少
如果少于 3 (2,1)，我就有很大的空白区域可供滚动
那么有没有办法让动态数字滚动并避免滚动空白？
目前还不清楚你在问什么。 如果想法是拥有可以水平滚动的单行，那么您可能只需要
flex网格系统，而不是grid。示例：
.scroll-container { display:flex; gap:14px; overflow:auto;/* no need of @media to trigger scrollbars*/ } .scroll-container > div { border:solid; min-width:300px;/* no need of @media from here */ flex-basis:30%;/* unsure if you need that one */ flex-shrink:0;/*should it shrink below the flex-basis */ flex-grow:1; } /*Make up */ .scroll-container { margin:1em; padding:1em; background:lightgreen; counter-reset:div } .scroll-container > div:before { counter-increment:div; content:counter(div) }