CSS Grid 实现像 Flex Wrap 一样的绕行

Question

我目前有这个例子：

* {
  box-sizing: border-box;
}

div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 5px;
}

span {
  padding: 10px;
  border: 1px solid black;
}

<div>
  <span>Orange</span>
  <span>Purple</span>
  <span>Aquamarine</span>
  <span>Black</span>
  <span>Brown</span>
  <span>Red</span>
</div>

好处是我有一个网格，可以包含灵活数量的元素，并且这些元素能够换行。
糟糕的是，我必须设置一个 fixed 最小值（此处

50px

显示问题）才能使项目换行。

有没有办法实现相同的布局但不设置固定的最小尺寸？ （就像

flex: wrap;

）。
我很想能够做这样的事情：

repeat(auto-fit, minmax(auto, 1fr))

但这不是有效的 CSS。

Answer 1

网格与弹性盒有着根本的不同。这就是为什么我们同时拥有它们。重要的根本区别在于网格具有上层建筑，并且内容适合该上层建筑。 Flexbox 没有上层建筑，内容只是内容，它可以自由移动。