.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?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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
flexgrid system instead ofgrid.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) }