Ajustement adaptatif CSS GRID non emballé

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>

J'ai cette classe CSS, la première est de rendre ma grille réactive, mais @1000px je veux qu'elle défile et ne s'enroule pas, c'est pourquoi je répète 3, Maintenant le problème c'est que parfois j'ai 3 projets et parfois moins

Si c'est inférieur à 3 (2,1), j'ai beaucoup d'espace vide pour faire défiler

Alors, existe-t-il un moyen de faire défiler des nombres dynamiques et d'éviter de faire défiler les espaces ?

Answer 1

Ce que vous demandez n’est pas clair. Si l'idée est d'avoir une seule ligne qui défile horizontalement, alors vous voulez probablement juste flex 网格系统，而不是 grid.

Exemple :

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