最宽元素的宽度设置行中所有兄弟的宽度

Question

我已经阅读了很多关于CSS弹性框和CSS网格的教程，但坦率地说，我无法弄清楚如何做这个简单的（？）事情。

我想要的只是容器中的元素都与最宽的元素一样宽。

我不希望它们填满容器的整个宽度，只是增长到最大宽度。可以用CSS完成吗？

考虑这个HTML：

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

产生类似这样的东西：

我想要的是这样的东西，它们是那个最宽按钮的所有宽度：

我不希望他们伸出来填充页面的宽度：

可以这样做吗？如果是这样，上述HTML的CSS是什么？

Answer 1

是。这可以用纯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）。

但是，当容器的宽度/高度是动态的时，Grid规范提供了一种特别独特的行为（例如，display: inline-grid，在这种情况下）。

在这种情况下，fr单位将计算每个网格项的max-content。然后它将获取它找到的最大值，并将其用作轨道上所有项目的1fr长度。

这会导致网格项共享行中最宽项的宽度。

奇怪，但确实如此。

这也是equal height rows is possible with Grid (but not flexbox)。

布局的原因

以下是规范中的相关部分：

  

7.2.3. Flexible Lengths: the fr unit

     

...

     

当可用空间是无限的时（在网格时发生）   容器的宽度或高度是不确定的），弹性大小（fr）网格轨道   在保持各自比例的同时确定其内容的大小。

     

通过确定来计算每个弹性尺寸网格轨道的使用大小   每个弹性大小的网格轨道的max-content大小并将其除以   通过相应的弹性因子确定“假设1fr   大小”。

     

最大值用作已解决的1fr长度（   flex fraction），然后乘以每个网格轨道的flex   决定其最终规模的因素。

Answer 2

这是使用CSS Grid处理任意数量按钮的解决方案：

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

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