我可以在JavaScript中模拟具有动态单元格/行数的CSS网格吗？

Question

我想做的是用动态数量的单元格制作一个CSS grid。为了简单起见，让我们假设每行始终有四个单元格。我可以指定具有如此动态行数的网格吗？

为了简化起见，这是Flexbox的实现：

const COLORS = [
  '#FE9',
  '#9AF',
  '#F9A',
  "#AFA",
  "#FA7"
];

function addItem(container, template) {
  let color = COLORS[_.random(COLORS.length - 1)];
  let num = _.random(10000);
  
  container.append(Mustache.render(template, { color, num }));
}

$(() => {
  const tmpl = $('#item_template').html()
  const container = $('#app');
  
  for(let i=0; i<5; i++) { addItem(container, tmpl); }
  
  $('#add_el').click(() => {
    addItem(container, tmpl);
  })
  
  container.on('click', '.del_el', (e) => {
    $(e.target).closest('.item').remove();
  });
});

.container {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}
.container .item {
  flex: 0 0 calc(25% - 1em);
  min-height: 120px;
  margin: 0.25em 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app" class="container">
</div>

<button id="add_el">Add element</button>

<template id="item_template">
  <div class="item" style="background: {{color}}">
    <p>{{ num }}</p>
    <p>
      <button class="del_el">Delete</button>
    </p>
  </div>
</template>

P.S。显然，我第一次不太清楚...我想使用最新的CSS Grid Layout.]重新创建此效果

我想做的是使CSS网格具有动态数量的单元格。为了简单起见，让我们假设每行始终有四个单元格。我可以指定具有这样的动态数字的网格吗？

Answer 1

[好，在阅读了MDN reference,之后，我找到了答案！动态行（或列）的关键是repeat属性。

Answer 2

这样的事情？

Answer 3

您不需要使用重复。相反，您可以只使用JavaScript代码中的变量--grid-template-columns。

Answer 4

[另一个选项是使用JavaScript来动态设置gridTemplateRows和gridTemplateColumns属性。可以按照以下步骤进行：