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 类中。