是的。这可以用纯CSS来完成。

这里有一个简单的解决方案：

.container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
}

<div class="container">
   <button>a normal button</button>
   <button>tiny</button>
   <button>a really, really, really wide button</button>
</div>

以下是它的工作原理：

网格布局提供了一个用于在网格容器中建立可变长度的单元。这是**fr**单元。它被设计用来分配容器中的自由空间（有点类似于flex-grow）。
然而，当容器的宽度/高度是动态的（例如，在本例中为display: inline-grid）时，Grid规范提供了一个特别独特的行为。
在这种情况下，fr单元将计算每个网格项的max-content。然后，它将采用找到的最大值，并将其用作轨道上所有项目的1fr长度。
这将导致网格项共享行中最宽项的宽度。
奇怪，但真的。
这也是为什么布局为equal height rows is possible with Grid (but not flexbox)。

• 以下是规范中的相关部分：*
  7.2.3.柔性长度：fr单元

...
当可用空间无限时（当网格容器的宽度或高度不确定时会发生这种情况），弹性大小（fr）的网格轨道将根据其内容调整大小，同时保持其各自的比例。
通过确定每个弹性大小的网格轨道的max-content大小并将该大小除以相应的弹性因子以确定“假设1fr大小”来计算每个弹性大小的网格轨道的使用大小。
其中的最大值被用作解析的1fr长度（弯曲分数），然后乘以每个栅格轨迹的弯曲因子以确定其最终大小。

下面是一个使用CSS Grid的解决方案，可以使用任意数量的按钮：

div.container {
  display: inline-grid;
  grid-auto-columns: 1fr;
}

div.container button {
  grid-row: 1;
}

为了解决任何数量的元素（不需要预先知道数量）：

• 使用内联网格容器（display: inline-grid）。
• 将grid-auto-columns设置为1fr，这样隐式创建的列轨道的大小都为1fr，这使得它们在本例中都是最大列的大小。
• 将grid-auto-flow设置为column，以便在向网格添加元素时创建新列（而不是行）。

document.querySelector('#addBtn').addEventListener('click', e => 
  document.querySelector('.container').append(
    Object.assign(document.createElement('button'), 
      {textContent: document.querySelector('input').value})));

.container {
  display: inline-grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}

<div class="container">
   <button>a normal button</button>
   <button>tiny</button>
   <button>a really, really, really wide button</button>
</div>
<div style="margin-top: 10px;">
  <input placeholder="Button text" />
  <button id="addBtn">Add New Button</button>
</div>