CSS Grid overflowing

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>

@TemaniAfif i need variable columns count, if it fit then 3, if it doesn't fit then 2 or 1 — petofefe, Dec 30 '20 at 12:05
@TemaniAfif i tried to use `repeat(auto-fill,minmax(max(0,100%/4),1fr));` but then all labels are on top of each other and when i use `repeat(auto-fit, minmax(calc(100% / 3 - 20px), 1fr));` thenall of items are forced into 3 columns and text is overflowing over another text — petofefe, Dec 30 '20 at 12:19
`repeat(auto-fill,minmax(max(0px,100%/4),1fr))` <-- you need px to 0 — Temani Afif, Dec 30 '20 at 12:30
@TemaniAfif i used that and text is still overflowing https://pasteboard.co/JHjMhxq.png — petofefe, Dec 30 '20 at 12:38

score 1 · Answer 1 · answered Dec 30 '20 at 15:54

1

just the minmax, it works on different size.

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

answered Dec 30 '20 at 15:54

gregory broyer

51
5

adampweb · Answer 2 · 2020-12-31T09:55:03.997

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>

Increase width of main-wrapper, or use shorter strings in 1st wrapper — adampweb, Dec 30 '20 at 19:00
Please include all relevant code in the answer it self, not off site. — Jon P, Dec 30 '20 at 23:40

CSS Grid overflowing

2 Answers2