I've been working on this for a couple of hours, but I haven't been able to get it right. I want to add labels in a grid layout with a maximum of 3 columns. If the items don't fit, they should wrap to the next row. It would be great if the items could reorder themselves to fit as many as possible in a row.
Here is the code snippet I have so far:
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>