每个内容的按钮自动宽度，但与页面网格对齐的步骤答案

【问题标题】：Button auto width per content but in steps aligned to page grid每个内容的按钮自动宽度，但与页面网格对齐的步骤
【发布时间】：2018-11-29 09:51:11
【问题描述】：

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

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

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

如何仅使用 CSS（如果有的话）来做到这一点？

注意：我知道这可以使用 Javascript 来完成，但如果可能的话，我正在寻找一个纯 CSS 的解决方案，它可以使用 flex、grid 或其他任何东西CSS3 提供的布局。

【问题讨论】：

【解决方案1】：

您可以使用 CSS3 属性自动填充和自动调整。请参阅以下链接

【讨论】：

我从未考虑过似乎能够提供我想要的东西的网格布局。不过我正在使用 flexbox。但无论如何我在引用的页面上都找不到任何 auto-fill 或 auto-fit 。如果您能复制您所指的相关摘录，那就太好了。
请同时参考我附加的问题图片，这样可以更清楚我在这里要完成的工作。