基于项目数的CSS动态行布局

Question

我想知道CSS Grid和/或Flexbox是否可以根据项目数量创建与以下内容类似的动态网格：

Answer 1

简短的回答是“否”，我不相信没有某种程度的javascript就可以实现这一目标。话虽如此，这是一种以最少的脚本编写就可以完成它的方法。

function generateBoxes(size){
  let str = "", n = size
  while(--n > -1){
    str += `<div data-size="${size}"></div>`
  }
  return str
}

function createLayout(i){
  let htmlOutput = ""
  if(i == 1) htmlOutput = generateBoxes(1)
  else {
    while(i > 2 && i != 4){
      i -= 3
      htmlOutput += generateBoxes(3)
    }

    while(i > 0){
      i -= 2
      htmlOutput += generateBoxes(2)
    }
  }
  return htmlOutput
}

document.querySelector('button').addEventListener('click', e => {
  let i = document.querySelector('input').value || 0
    
  document.getElementById('output').innerHTML = createLayout(i)
})

#output {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
}
[data-size] {
  background: grey;
  border: 1px solid white;
  box-sizing: border-box;
  height: 40px;
  flex-shrink: 0;
  flex-basis: 1;
}
[data-size="3"] {
  flex-basis: 33.333%;
}
[data-size="2"] {
  flex-basis: 50%;
}

<label>Input a number of boxes: <input type="number" /></label><button>Go</button>

<div id="output"></div>