Flex grid with dynamic content

Question

I need a solution, most likely using flexbox, for a grid of content that needs to be flexible depending on how many objects are created within the CMS. I know flex can be used to create each individual option as shown below, but is there a way I can use flex to show the layout without knowing the total number of divs?

user_14251221 · Answer

is there a way I can use flex to show the layout without knowing the total number of divs?

Just apply flex:auto on all child divs:

.row{
  display:flex;
  flex-wrap:wrap;
  width:330px;
}
.col{
  background-color:#D0D1D2;
  width:100px;
  height:100px;
  margin:5px;
  flex:auto;
}

Demonstration example that lets you choose the number of divs:

range.addEventListener('input', function(){
  row.innerHTML = ''.repeat(this.value);
  this.nextElementSibling.textContent = this.value;
})

.row{
  display:flex;
  flex-wrap:wrap;
  width:330px;
}
.col{
  background-color:#D0D1D2;
  width:100px;
  height:100px;
  margin:5px;
  flex:auto;
}

user_16342561 · Answer

// You can remove this unless you want to
// programmatically add or remove divs
var noOfDivs = 1;
function addDiv() {
  noOfDivs++;
  render();
}
function removeDiv() {
  noOfDivs = Math.max(0, noOfDivs - 1);
  render();
}
function render() {
  document.getElementById("container").innerHTML = '';
  for(var i = 0; i < noOfDivs; i++) {
    document.getElementById("container").innerHTML += ""
  }
}

#container {
  display: flex;
  flex-flow: row wrap;
  margin-bottom: 5px;
}

#container div.inner {
  background: #aaa;
  height: 100px;
  width: 100px;
  margin: 2px;
  flex: auto;
}

/*Remove these syles later they are just for the buttons*/
#add-box {
  position: fixed;
  left: 10px;
  top: 10px;
  font-size
}
#remove-box {
  position: fixed;
  left: 80px;
  top: 10px;
  font-size
}

Flex grid with dynamic content

2 Answers