.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 ?
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 :