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

Question

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

• 图 block 之间的间距是固定且一致的
• 它们的尺寸可以在固定的最小宽度和最大宽度之间扩展，但无论其内容如何，​​都应具有相同的宽度。在下面的示例中，我使用了 100 像素的最小宽度和 200 像素的最大宽度。
• 如果它们的最小宽度不能全部水平放置在容器中，它们应该换行。
• 如果容器大得多，它们的扩展不应超过其最大固定宽度，应保持在容器的中央并且它们之间的空间不应扩展。

也许纯CSS做不到，但感觉应该可以!下面是一个最小的示例，我将在此处详细说明:

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

选项 1:CSS 网格

这似乎是最佳选择，因为我们总是希望 tile 宽度保持一致。为了让列换行，我相信您需要使用 repeat() 语法，而 repeat(auto-fit, ...) 似乎最适合这个用例。显而易见的解决方案似乎是使用 repeat(auto-fit, minmax(100px, 200px))。 但是，这不起作用无论容器的宽度如何，图 block 始终保持在 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;
}

通过使用 grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) 然后设置计算 max-width 在容器上并强制它也居中，但感觉这应该可以单独使用 CSS Grid？

选项 2:Flexbox

使用 flexbox 实现包装要简单得多，并且在子组件上使用 flex 意味着我们可以轻松地设置具有最小和最大宽度的灵活 tiles。然而，一旦 child 换行到第二行，它显然会扩展到其最大宽度并且与其他图 block 不一致:

.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 布局，你可以看到它们在全宽下表现很好，没有扩展到超过它们的最大宽度，它们之间的间距一致:

随着容器缩小，您可以看到网格布局元素并没有随之缩小，而是立即换行。 flex 布局表现得很好:

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

Answer 1

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

在容器上，将最小宽度设置为 100px，将最大宽度设置为 child 的大小:

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

并且在每个 child 上，您将有一个固定的宽度，但最大宽度为 100%，因此它会在需要时缩小:

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

更新 fiddle :https://jsfiddle.net/7exd5hom/