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 не работают.

Другими словами, я хочу растянуть столбцы, чтобы предотвратить переполнение содержимого: