CSS GRID Auto-fit without wrap

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>