应用错误收集

我想实现与页面网格相关的宽度按钮，以使它们具有准自动宽度，具体取决于内容，但具有一定的宽度步长，以便按钮宽度始终占用N个页面网格列。当按钮内容变得太宽而无法在单个网格列中呈现按钮时，它将变成2列宽（如果需要，甚至会更多）...

此图显示了一个示例，应如何根据网格调整按钮的大小：

enter image description here

第一行显示第二个按钮，该按钮超过单列宽度（实际上，它超过了两列），因此应该跨越页面网格中的3列。第二行显示正确大小的按钮，因此需要3个整页的网格列。

如何仅使用CSS（如果有的话）完成此操作？

注意： 我知道这可以使用Javascript来完成，但是我正在寻找一种仅CSS的解决方案，该解决方案可以使用flex，grid或其他方式CSS3提供的布局。