无包装的CSS GRID自适应拟合

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>

我有这个CSS类，第一个是让我的网格响应，但是@1000px我希望它滚动并且不换行，所以这就是我重复3的原因， 现在的问题是有时我有 3 个项目，有时更少

如果少于 3 (2,1)，我就有很大的空白区域可供滚动

那么有没有办法让动态数字滚动并避免滚动空白？

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