無包裝的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)
}