html - CSS 在具有自动列数的网格中显示无换行 DIV

Question

比如说，如果我想div在网格中显示一组不换行的，全部向左对齐，以便根据浏览器的窗口宽度自动确定列数。

我可以用 CSS 做吗？

这是一个草图来展示这一点：

我能够找到以下gridCSS 属性，但问题是它希望我指定单个单元格的最小宽度，或者8em在下面的示例中，这违背了目的，因为我不知道每个单元格的宽度。

<div class="container">
  <div class="cell"> ...</div>
  <div class="cell"> .......... </div>
  ...
  <div class="cell"> ..... </div>
</div>


.container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
}

.cell{
  display: inline-block;
  margin: 1px 0.5em 1px 0;
  white-space: nowrap;
}

标签： htmlcsscss-grid