Unverpackte adaptive CSS-GRID-Anpassung

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>

Ich habe diese CSS-Klasse. Die erste besteht darin, mein Raster reaktionsfähig zu machen, aber bei 1000 Pixel möchte ich, dass es scrollt und nicht umbricht, deshalb wiederhole ich 3, Das Problem ist nun, dass ich manchmal 3 Projekte habe und manchmal weniger

Wenn es weniger als 3 (2,1) ist, habe ich viel freien Platz zum Scrollen

Gibt es also eine Möglichkeit, dynamische Zahlen scrollen zu lassen und das Scrollen von Leerzeichen zu vermeiden?

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