CSS Grid - автоматическое размещение nowrap-текста

Question

Я ожидаю что-то подобное с использованием сетки CSS:

Мне нужно 4 столбца с одинаковой шириной и неизвестным количеством строк.Площадь / диапазон каждого элемента зависит от длины его собственного текста

HTML:

<div>
  <b>Any</b>
  <b>One Size</b>
  <b>XXL</b>
  <b>XL</b>
  <b>L</b>
  <b>no_wrap_text</b>
  <b>text</b>
  <b>very_very_very_long_text</b>
</div>

CSS:

div{
  display: grid;
  grid-template-columns: repeat(4, 60px);
  grid-gap: 4px;
}

b{
  white-space: nowrap;
  border: 2px solid black;
  text-align: center;
}

Но я должен добавить это вручную:

b:nth-child(2),
b:nth-child(6) {
  grid-column: span 2;
}

b:nth-child(8) {
  grid-column: span 3;
}

Или динамически вычислять каждый элемент <b>, используя Javascript

el.style.gridColumn = isVeryLong ? 'span 3' : isLong ? 'span 2' : 'span 1'

Можно ли каким-то образом добиться того же результата, просто используя чистый CSS?