0

I want to build a grid that dynamically makes space for new cells and eventually wraps around. I think some pictures will best illustrate what I'm trying to do.

The black box is the viewport, the light blue boxes are the elements that are added.

One box just fills the whole viewport:
1x1 grid

As more boxes are added, the layout squeezes them in horizontally:
1x3 grid

Until a minimum width is reached and the layout wraps around:
2x3 grid

What's the best way to do this? I tried with flexbox, but didn't manage to squeeze the boxes into the viewport vertically when flex-wrap was enabled - they would just overflow.

EDIT: Added snippet showing what I've tried:

main {
  display: flex;
  flex-wrap: wrap;
  height: 210px;
  width: 330px;
  border: solid 1px black;
  margin-bottom: 30px;
}

main > div {
  flex: 1 0 100px;
  background: lightblue;
  margin: 5px;
}

main > div > p {
  /* Content placeholder */
  height: 200px;
}
This looks relatively good (except for the width of the 4th div):
<main>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</main>

As soon as you add content, it breaks:
<main>
  <div><p></p></div>
  <div><p></p></div>
  <div><p></p></div>
  <div><p></p></div>
</main>
eflorico
  • 3,589
  • 2
  • 30
  • 41

1 Answers1

0

I do not see simple way to set breakpoint without knowing what amount of elements it will contain, but usage of flex-basis may help you, also I have found this case which may be your solution.

Community
  • 1
  • 1
Jakub Chlebowicz
  • 509
  • 1
  • 6
  • 12