CSS网格适合内容并包装

Question

我正在寻找正确的CSS网格语法以将多个子元素连续包装，然后在没有更多空间的情况下包装。

我在这里设置了一个示例： https://codepen.io/velnias2015/pen/xeeJrZ

标记：

<div class="container">
<span>Spain</span>
<span>France</span>
<span>Germany</span>
<span>Ireland</span>
<span>United Kingdom</span>
<span>Uruguay</span>
</div>

CSS

  display: grid;
  grid-auto-flow: column;
  grid-gap: 0.5rem;

现在我的问题是内容没有包装。每个子元素可以基于内容具有不同的宽度。我只想每行容纳尽可能多的东西，甚至只有1个然后换行。

Answer 1

将display: flex;和flex-wrap: wrap;添加到您的容器类中。另外，由于这会使边距塌陷，因此请在您的margin: 2px;类中添加container span。