是否可以对 CSS 网格中重复且可包装的列使用固定的最小和最大宽度？

Question

我想设置一个 CSS 布局，其中容器包含固定数量的具有以下属性的灵活宽度图块：

• 瓷砖之间的间距是固定且一致的
• 它们的大小可以在固定的最小和最大宽度之间扩展，但无论其内容如何，​​都应该具有相同的宽度。在下面的示例中，我使用 100px 最小宽度和 200px 最大宽度。
• 如果它们在最小宽度下不能全部水平放入容器中，则它们应该换行为多行。
• 如果容器较大，它们的扩展不应超过其最大固定宽度，应保持在容器的中心，并且它们之间的空间不应扩展。

也许纯 CSS 是不可能的，但感觉应该可以！下面有一个最小的例子，我将在这里详细说明：

https://jsfiddle.net/vztskh6f/1/

选项 1：CSS 网格

这似乎是最好的选择，因为我们总是希望图块宽度保持一致。为了使列换行，我相信您需要使用repeat()语法，并且repeat(auto-fit, ...)似乎最适合此用例。显而易见的解决方案似乎是使用repeat(auto-fit, minmax(100px, 200px)). 然而，这不起作用，200px无论容器的宽度如何，瓷砖总是保持在原处。在所有其他方面，这都按预期运行：

.gridContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
  padding: 10px;
  gap: 10px;
  justify-items: center;
  justify-content: center;
}

.child {
  width: 100%;
  height: 30px;
  background: #0f0;
  text-align: center;
}

可以使用选项 1 来强制执行所需的规范，方法是使用grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))然后在容器上设置计算值max-width并强制其居中，但感觉单独使用 CSS Grid 应该可以实现这一点？

选项 2：弹性盒

使用 Flexbox 实现包裹要简单得多，并且flex在子项上使用意味着我们可以轻松设置具有最小和最大宽度的灵活图块。然而，一旦子元素换行到第二行，它显然会扩展到其最大宽度，并且与其他图块不一致：

.flexContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.child {
  height: 30px;
  background: #0f0;
  text-align: center;
  min-width: 100px;
  max-width: 200px;
  // this seems to create consistent widths better than flex: 1 1 100px;
  flex: 1 1 0;
  // could use gap if it wasn't for Safari
  margin: 0 5px 10px;
}

截图

第一行是网格布局，第二行是弹性布局，您可以看到它们在全宽下表现良好，不会超出其最大宽度，并且它们之间的间距一致：

当容器缩小时，您可以看到网格布局项没有随之缩小，而是立即换行。Flex 布局表现良好：

随着容器继续缩小，柔性开始包裹在所需的位置，但下一行的图块立即扩展到其最大宽度：

Answer 1

为了实现您想要做的事情，您需要同时处理容器和子容器。

在容器上，您将最小宽度设置为 100px，最大宽度应为子级的大小：

.gridContainer {
  grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
}

对于每个子元素，你将有一个固定的宽度，但最大宽度为 100%，因此如果需要它会缩小：

.child {
  width: 200px;
  max-width: 100%;
}

更新的小提琴： https: //jsfiddle.net/7exd5hom/