CSS 网格溢出

Question

I am trying for a couple of hours to make this work, but I still failed. I need to put labels in the grid, but maximally 3 columns. If it doesn't fit, then wrap it to the next row. If it is possible items can reorder to fit as many as possible to row.

I made a code snippet here:

 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

just the minmax, it works on different size.

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

Answer 2

I think @gregory-broyer answer is appliable for the upper wrapper, but not fully for the lower. But I define a 2nd class for 2n wrapper, and set grid-template-columns to the original.

The demo is available here:

 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>