Unwrapped CSS GRID adaptive fitting

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 makes my grid responsive, but @1000px I want it to scroll and not wrap, so that's why I repeat 3, Now the problem is sometimes I have 3 projects and sometimes less

If it's less than 3 (2,1), I have a lot of empty space to scroll around

So is there a way to make dynamic numbers scroll and avoid scrolling whitespace?

Answer 1

It's not clear what you are asking. If the idea is to have a single row that can be scrolled horizontally, then you may just want a flex grid system instead of grid.

Example:

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