CSS dynamic columns inside single container

Question

I am trying to make a system that will create a dynamic column layout inside a single container, but I am not sure if this is doable. For reference, see this code:

.rekt {
  width: 422px;
  background-color: beige;
  height: 100%;
  padding: 15px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border: 1px solid black;
}

.rekt .row {
  background-color: lightgreen;
  color: royalblue;
  width: 97.5%;
  border: 1px solid black;
  padding: 5px;
  margin-bottom: 10px;
}

.rekt span {
  font-weight: bold;
  margin-bottom: 5px;
  display: inline-block;
}

<div class="flexbox">
  <div class='rekt'>
    <span>Cluster1</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
  </div>

  <div class='rekt'>
    <span>Cluster2</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
  </div>

  <div class='rekt'>
    <span>Cluster3</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
  </div>

  <div class='rekt'>
    <span>Cluster4</span>
    <div class='row'>Cassandra</div>
    <div class='row'>Mongo</div>
  </div>

  <div class='rekt'>
    <span>Cluster5</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
  </div>

  <div class='rekt'>
    <span>Cluster6</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>bar</div>
  </div>
</div>

https://codepen.io/wa23/pen/WOMGxp

So, each rekt lies inside a single container, the flexbox, but each rekt could have a variable height, depending on how many row the user inserts into it.

Ideally, you'd have smaller ones like cluster 2,3, and 4 be grouped together into one column, while cluster6 would be in its own column because it is enormous.

I tried using flexbox:

.flexbox {
  display: flex;
  flex-flow: column wrap;
}

But this did not work as expected. I know these bounds sound contrived, but it is how the system is set up.

I didn't understand what is the change you are looking for on top of this. — Aftab Khan, Jun 29 '17 at 17:55

Michael Benjamin · Accepted Answer · 2019-07-20T02:22:23.707

You mentioned you tried the code below and it didn't work:

.flexbox {
  display: flex;
  flex-flow: column wrap;
}

It probably didn't work because you didn't specify a height on the container. Without a fixed height, the flex items wouldn't know where to wrap.

revised codepen

.flexbox {
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  height: 100vh;
}
.rekt {
  width: 422px;
  background-color: beige;
  /* height: 100%; */
  padding: 15px;
  padding-bottom: 5px;
  /* margin-bottom: 10px; */
  border: 1px solid black;
}
.row {
  background-color: lightgreen;
  color: royalblue;
  width: 97.5%;
  border: 1px solid black;
  padding: 5px;
  margin-bottom: 10px;
}
span {
  font-weight: bold;
  margin-bottom: 5px;
  display: inline-block;
}
body {
  margin: 0;
}

<div class="flexbox">
  <div class='rekt'>
    <span>Cluster1</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
  </div>

  <div class='rekt'>
    <span>Cluster2</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
  </div>

  <div class='rekt'>
    <span>Cluster3</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
  </div>

  <div class='rekt'>
    <span>Cluster4</span>
    <div class='row'>Cassandra</div>
    <div class='row'>Mongo</div>
  </div>

  <div class='rekt'>
    <span>Cluster5</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
  </div>

  <div class='rekt'>
    <span>Cluster6</span>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>foo</div>
    <div class='row'>bar</div>
    <div class='row'>bar</div>
  </div>
</div>

More information:

CSS dynamic columns inside single container

1 Answers1