CSS grid: how to automatically size all columns to widest column?

Question

This is easiest to explain with an example:

.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>

I want to size all the columns such that they're the same width as the widest column, in this case the one that says "4ergearg ergearg er".

I don't know its width, thus I don't know what to replace that 80px with. min-content, max-content, and auto don't seem to work.

In other words, i want to stretch the columns to prevent the content from overflowing: