CSS网格-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;
}

或使用Javascript动态计算每个<b>元素

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

仅使用纯CSS，我能以某种方式获得相同的结果吗？