CSS 網格溢出

Question

我嘗試了幾個小時來完成這項工作，但我仍然失敗了。 我需要在網格中放置標簽，但最多 3 列。 如果不合適，則將其包裝到下一行。 如果有可能，項目可以重新排序以適應盡可能多的行。

我在這里做了一個代碼片段：

 body { background-color: #555; margin: 0; padding: 0; }.main-wrapper { background-color: #fff; margin: auto; max-width: 280px; } label { white-space: nowrap; }.wrapper { padding-bottom: 50px; display: grid; */ grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(max-content, 30%)); grid-auto-rows: minmax(min-content, max-content); }

 <div class="main-wrapper"> <div class="wrapper"> <label><input type="checkbox"/>Bafang M500</label> <label><input type="checkbox"/>Bafang MaxDrive</label> <label><input type="checkbox"/>Bosch Active Plus</label> <label><input type="checkbox"/>Bosch Performance</label> <label><input type="checkbox"/>Bosch Performance CX</label> <label><input type="checkbox"/>OLI SPORT</label> <label><input type="checkbox"/>Shimano StePS E6000</label> <label><input type="checkbox"/>Shimano STePS E6100</label> <label><input type="checkbox"/>Yamaha PW-ST</label> </div> <div class="wrapper"> <label><input type="checkbox"/>500<</label> <label><input type="checkbox"/>500</label> <label><input type="checkbox"/>400</label> <label><input type="checkbox"/>300</label> <label><input type="checkbox"/>200</label> <label><input type="checkbox"/>100</label> <label><input type="checkbox"/><100</label> </div> </div>

Answer 1

只是最小最大值，它適用於不同的尺寸。

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

Answer 2

我認為@gregory-broyer 的答案適用於上層包裝，但不完全適用於下層。 但是我為 2n 包裝器定義了第二個 class，並將grid-template-columns設置為原始值。

該演示可在此處獲得：

 body { background-color: #555; margin: 0; padding: 0; }.main-wrapper { background-color: #fff; margin: auto; max-width: 280px; } label { white-space: nowrap; }.wrapper { padding-bottom: 50px; display: grid; */ grid-gap: 10px; //grid-template-columns: repeat(auto-fit, minmax(max-content, 30%)); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-auto-rows: minmax(min-content, max-content); }.wrapper-h{ grid-template-columns: repeat(auto-fit, minmax(max-content, 30%)); }

 <div class="main-wrapper"> <div class="wrapper"> <label><input type="checkbox"/>Bafang M500</label> <label><input type="checkbox"/>Bafang MaxDrive</label> <label><input type="checkbox"/>Bosch Active Plus</label> <label><input type="checkbox"/>Bosch Performance</label> <label><input type="checkbox"/>Bosch Performance CX</label> <label><input type="checkbox"/>OLI SPORT</label> <label><input type="checkbox"/>Shimano StePS E6000</label> <label><input type="checkbox"/>Shimano STePS E6100</label> <label><input type="checkbox"/>Yamaha PW-ST</label> </div> <div class="wrapper wrapper-h"> <label><input type="checkbox"/>500<</label> <label><input type="checkbox"/>500</label> <label><input type="checkbox"/>400</label> <label><input type="checkbox"/>300</label> <label><input type="checkbox"/>200</label> <label><input type="checkbox"/>100</label> <label><input type="checkbox"/>&lt100</label> </div> </div>