我想做的是用一个动态的细胞数做一个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>

很显然,我第一次说得不够清楚.我想用最新的CSS Grid Layout.

推荐答案

好的,看了MDN reference,之后我找到了答案!动态行(或列)的关键是repeat属性.

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: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(auto-fill, 120px);
  grid-row-gap: .5em;
  grid-column-gap: 1em;
}

.container .item {
}
<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.,或者您可以在我的特定示例中使用grid-auto-rows.

Css相关问答推荐

Mat-Form-字段占用更多区域,导致其他控件远离它

text-size-adjust在我的css中曾经在我的手机上的Chrome上工作,停止工作,仍然在我妻子的手机上工作

如何缩小 Select 元素的背景图像?

CSS 内联 Flex 和段落换行

flexbox换行时自动设置高度的原理是什么

如何在启动时滚动 div 的底部?

使用 React 和 Flexbox 文本溢出框外

清除 CSS 中已设置的填充属性以恢复 SVG 的默认值

在 SVG 元素上方添加标签而不移动 SVG 元素

Blazor 组件未链接 css

具有自动调整大小的自动填充行的 CSS 网格

CSS3 的 :root 伪类和 html 有什么区别?

你能用 JavaScript 控制 GIF 动画吗?

CSS如何使元素淡入然后淡出?

输入/按钮元素不会在 flex 容器中缩小

内联