如何对齐不同宽度的网格元素，避免宽元素打乱后续对齐

我正尝试将不同宽度的元素对齐到网格中。使用min-width属性可实现短元素的对齐，但元素过宽时会打乱该行后续元素的对齐。我希望实现的效果是：宽元素之后的后续元素能自动对齐到下一个“网格位置”，同时不允许元素内出现换行，且尽可能避免使用JS。

我尝试过简单的flexbox方案，这是最接近需求的实现，但无法达到目标效果，代码如下：

CSS代码 #

#content {
  color: black;
}
.container {
  width: 275px;
  background: gray;
  border: 1px solid black;

  display: flex;
  flex-wrap: wrap;
}
.item {
  border: 1px solid black;
  background: white;

  min-width: 55px;
  margin: 2.5px;
  padding: 2px;
}

HTML代码 #

<div id="content">
  <div class="container">
    <div class="item">
      <span>Item 1</span>
    </div>
    <div class="item">
      <span>Item 2a</span>
    </div>
    <div class="item">
      <span>Item 2b</span>
    </div>
    <div class="item">
      <span>Item 3</span>
    </div>
    <div class="item">
      <span>Item 4 with a long name</span>
    </div>
    <div class="item">
      <span>Item 5</span>
    </div>
    <div class="item">
      <span>Item 6a</span>
    </div>
    <div class="item">
      <span>Item 6b</span>
    </div>
    <div class="item">
      <span>Item 7</span>
    </div>
    <div class="item">
      <span>Item 8</span>
    </div>
  </div>
</div>

我也研究过grid或table布局，但找不到让元素根据自身宽度自动跨列的实现方法。

内容的提问来源于stack exchange，提问作者tired63194