居中网格内容，同时左对齐每行的内容，具有任意项/列宽度

Question

我有一排任意宽度的项目。它们在容器内居中（注意红色容器左右两侧的空白）：

有时容器会小于所有项目的宽度：

发生这种情况时，我希望最后的项目像这样包装到下一行：

对我来说非常重要的是每一行的内容必须左对齐，但整个网格必须居中：

最初，我尝试用 FlexBox 实现它。经过很多挫折和头发拉扯，我了解到这在 FlexBox 中是不可能的：https ://stackoverflow.com/a/32811002/901944

同一页面上的另一个答案建议使用 CSS 网格而不是 flexbox。

CSS grid 产生的结果略有不同，但这也适合我：

这是使其工作的代码：

.red-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
  justify-content: center;
}

该代码包含了很多的关键词，我不明白：grid-template-columns，repeat，auto-fit，minmax和max-content。我尝试阅读它们并失败了。没有任何指南和 API 文档明确解释这种特定组合的工作原理。MDN 文档太短而且含糊不清。

我特别纠结的是这个210px神奇的数字。为什么有必要？（呃，我知道这是必要的，因为规范是如何设计的，但这并不能帮助我理解。）

我的网格中项目的大小是任意的，所以我不能使用固定值。此外，设置此固定值会使结果略有偏差：小项目会增长，而大项目会溢出容器。

我本质上想要的是：

  grid-template-columns: repeat(auto-fit, minmax(min-content, max-content));

但该规则被浏览器认为是错误的。

我偶然发现了这个答案，它解释了在这种情况下规范禁止使用两者min-content和max-content一起使用。答案的建议解决方案是……使用 Flexbox！

循环已关闭。我回到了我开始的地方，希望我现在头上的头发又少了一轮。

如何在左对齐每行内容的同时使网格居中，项目具有任意宽度？

为了您的方便，这里有一个样板：https ://jsbin.com/vuguhoj/edit?html,css, output

可以通过拖动右下角来调整容器的大小。

PS 不display: inline，float: left请。

.page {
  border: 1px solid black;
  overflow: hidden;
  resize: horizontal;
  max-width: 500px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max-content, 50px));
  justify-content: center;
}

.item {
  border: 1px solid black;
  margin: 1px;
}

<div class="page">
  <div class="grid">
    <div class="item">
      Foofoofoo
    </div>
    <div class="item">
      Bar
    </div>
    <div class="item">
      BazBaz
    </div>
    <div class="item">
      QuuxQuuxQuux
    </div>
  </div>
</div>

Answer 1

您有两个可用容器 -.page和.grid。

这使您能够分配两项任务——居中和左对齐。

使用顶层容器居中。

使用嵌套容器进行换行和左对齐。

这是一个代码概念：

.page {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  border: 1px solid black;
  max-width: 500px;
}

.grid {
  grid-column: 2;
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
}

.item {
  border: 1px solid black;
  margin: 1px;
}

<div class="page">
  <div class="grid">
    <div class="item">Foofoofoo</div>
    <div class="item">Bar</div>
    <div class="item">BazBaz</div>
    <div class="item">QuuxQuuxQuux</div>
  </div>
</div>

jsFiddle 演示