将 "display: inline-block" 作为 "display: grid" 元素的父元素且文本不重叠？

Question

我正在尝试整理一组统计数据，以便：

它们显示在一条水平线上
封闭元素的宽度不超过包含内容所需的宽度
统计数据之间应该有一个固定的差距

我尝试使用 display: grid 实现它。这是我的方法：

.outer {
  background-color: yellow;
  display: inline-block;
}

.stats {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

<div class="outer">
  <div class="stats">
    <div class="stat">
      <strong>Value:</strong> 1,234,568
    </div>
    <div class="stat">
      <strong>Another value:</strong> 98,765
    </div>
    <div class="stat">
      <strong>Test value:</strong> 83,263
    </div>
  </div>
</div>

不幸的是，这会导致一些奇怪的重叠。尽管 .outer 元素有足够的空间来扩展，但统计数据还是分了几行，文本也分到其他列中：

如何避免这个问题？我尝试添加：

.stat {
  white-space: nowrap;
}

...但文本仍然“运行”在一起。我错过了什么？

Answer 1

主要问题源于这个声明：

grid-template-columns: repeat(auto-fit, minmax(0, 1fr))

您正在将列设置为缩小为零宽度。

还有，1fr这里什么都不做，因为容器里没有空闲的space。（您将主容器设置为 inline-block，即最小宽度。这意味着没有额外的 space。）

至少，这些命令似乎混淆了 inline-block 算法。

考虑将列保留为 auto 宽度（默认设置）。

也许，将它们设置为出现在第一行。（我使用了 grid-auto-flow: column 技术。）

.outer {
  background-color: yellow;
  display: inline-block;
}

.stats {
  display: grid;
  grid-gap: 20px;
  grid-auto-flow: column;
}

<div class="outer">
  <div class="stats">
    <div class="stat">
      <strong>Value:</strong> 1,234,568
    </div>
    <div class="stat">
      <strong>Another value:</strong> 98,765
    </div>
    <div class="stat">
      <strong>Test value:</strong> 83,263
    </div>
  </div>
</div>

将 "display: inline-block" 作为 "display: grid" 元素的父元素且文本不重叠？

Having a "display: inline-block" as a parent to a "display: grid" element without having text overlap?

css

word-wrap

css-grid