CSS Grid - nowrap-text auto-placement

Question

I expect something like this using css grid:

I need 4 columns with the same width and unknown number of rows. Each item's area / span depends on its own text's length

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;
}

But I have to manually add this:

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

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

Or dynamically calculate each <b> element using Javascript

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

Can I somehow attain the same result by just using pure css?