CSS网格：如何自动将所有列的大小调整为最宽的列？

Question

用一个例子最容易解释：

.grid {
  display: grid;
  grid-gap: 5px 10px;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

.grid>div {
  background-color: yellow;
  white-space: nowrap;
}

<div class="grid">
  <div>foo</div>
  <div>foo bar</div>
  <div>eg ergerg</div>
  <div>fo eagro</div>
  <div>4ergearg ergearg er</div>
  <div>earg erg</div>
  <div>bverbr</div>
  <div> eargerg </div>
</div>

我想调整所有列的大小，以使其与最宽列的宽度相同，在本例中为“ 4ergearg ergearg er”。

我不知道它的宽度，因此我不知道用80px来代替它。 min-content，max-content和auto似乎无效。

换句话说，我想拉伸列以防止内容溢出：