CSS Grid在1000px下实现自适应滚动且无空白滚动区域的方案

第一步：修正HTML结构 #

你的Repeater代码存在结构错误，.index-tous-metier-container应该作为所有列表项的外层容器，而非每个子项的类。正确的ASP.NET结构如下：

<div class="index-tous-metier-container">
    <asp:Repeater ID="..." runat="server" OnItemDataBound="..._ItemDataBound">
        <ItemTemplate>
             <div class='dalle-not-select' id="...." runat="server">
               <div class="index-tous-metier-container-body">.....</div>
             </div>
        </ItemTemplate>
   </asp:Repeater>
</div>

第二步：修改CSS实现动态横向滚动 #

原来的repeat(3,1fr)会强制生成3列，即使子项不足3个，空白列也会占据空间导致无效滚动。以下两种方案都能解决问题：

方案1：Flex布局（推荐，更直观）

修改媒体查询中的CSS：

.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{
      display: flex;
      flex-wrap: nowrap; /* 禁止子项换行 */
      overflow-x: auto; /* 仅当总宽度超容器时显示滚动条 */
      gap: 14px;
   }
   .index-tous-metier-container .dalle-not-select{
      flex: 0 0 calc((100% / 3) - 9.33px); /* 等价原1fr效果，抵消gap影响 */
      min-width: 300px; /* 保证子项最小宽度 */
   }
}

• flex-wrap: nowrap让子项在一行排列，避免换行
• overflow-x: auto仅在子项总宽度超过容器时触发横向滚动，无多余空白时不会显示滚动条
• flex:0 0 ...固定子项宽度，避免被压缩或拉伸

方案2：Grid布局实现动态列数

如果偏好Grid，可修改媒体查询中的CSS：

.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{
      display: grid;
      grid-auto-flow: column; /* 按列方向生成子项，不换行 */
      grid-auto-columns: minmax(300px, 1fr); /* 每列最小300px，最大占满容器 */
      overflow-x: auto;
      gap: 14px;
   }
}

• grid-auto-flow: column让子项逐个生成列，而非自动换行
• grid-auto-columns定义列宽，子项不足3个时，列会自动占满容器宽度，无无效滚动；子项超过3个时，总宽度超容器则触发横向滚动

内容的提问来源于stack exchange，提问作者Rad