.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) }