html - 您可以使用 grid-auto-flow: dense 而不知道您将拥有多少网格项目

Question

我正在尝试设置功能列表的样式，并希望将它们布置在密集的网格中，但无法这样做。

目前，这些功能是使用弹性框设置的。作为一个广泛的例子：

.list {
  width: 400px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.list-item.short {
  background-color: green;
  width: 100px;
}

.list-item.medium {
  background-color: blue;
  width: 200px;
}

.list-item.long {
  background-color: red;
  width: 300px;
}

<ul class="list">
  <li class="list-item medium">MEDIUM</li>
  <li class="list-item medium">MEDIUM</li>
  <li class="list-item long">LONG</li>
  <li class="list-item short">SHORT</li>
  <li class="list-item long">LONG</li>
  <li class="list-item short">SHORT</li>
  <li class="list-item long">LONG</li>
</ul>

medium如果您运行该代码段，您将在伪代码中看到我希望由长度项填充的长度项旁边的空白short。

所以，从：

至：

在我看来，这对我grid-auto-flow: row dense来说是完美的，尽管我无法让它发挥作用。有没有办法我可以做到这一点？

值得注意的事情：在现实生活中，我不知道通过的特征的​​长度、顺序或数量。

我希望这将是一个简单的：

.list {
  width: 400px;
  list-style: none;
  display: grid;
  grid-auto-flow: row dense;
} 

但这无济于事 - 有没有办法布局列/行来实现这一点？我想知道是否dense只能用固定的方式插入其他人周围的物品grid-area？

标签： htmlcsssass