基于项目数量的CSS动态行布局[关闭]答案

【问题标题】：Dynamic row layout with CSS based on number of items [closed]基于项目数量的CSS动态行布局[关闭]
【发布时间】：2019-01-15 03:29:01
【问题描述】：

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

【问题讨论】：

您的问题的答案是，也许。但是在这个网站上，我们自愿帮助您修复您的代码。我们不会从头开始编写代码（想象一下，如果是这样的话）。让我们看看您的尝试。

标签： css flexbox grid

【解决方案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>

【讨论】：