CSS GRID Auto-fit without wrap - css

Question

.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>
I have this css class the first one is to make my grid responsive, but #1000px I want it to scroll and don't wrap so that's why I make repeat 3,
now the problem that some times I have 3 items, some times less
If I have less then 3 (2,1) I have a huge white space to scroll
So is there any way to have dynamic number with scroll and avoid having empty white space to scroll?

Answer 1

It is unclear what you are asking.
If the idea is to have a single row that can scroll horizontally, then you probably only need the flex grid system, not grid.
examples:
.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)
}
<div class="scroll-container">
<div> </div>
<div> </div>
<div> </div>
</div>
<div class="scroll-container">
<div> </div>
<div> </div>
</div>
<div class="scroll-container">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div class="scroll-container">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>