如何实现两个区块的列宽度统一？现有百分比适配方案存问题

以下图片可更清晰说明问题。

我希望让第二个区块（section）中的列（columns）与第一个区块的列宽度保持一致。目前我通过为区块左右两侧添加13%的内边距（padding），并为每列设置百分比宽度实现了效果，但存在自动填充百分比错误导致无法占满区块100%宽度的问题。

内容放置在名为infobox的容器中。

若不为区块设置内边距，显示效果如下：

优化实现思路 #

• CSS Grid方案：给infobox容器设置display: grid，根据实际列数定义grid-template-columns（比如repeat(3, 1fr)），搭配grid-column-gap设置列间距。两个区块直接复用该网格布局，自动保证列宽完全一致，不会出现宽度计算误差。
• Flexbox嵌套容器方案：为两个区块分别嵌套统一的内部容器，给这个容器设置与第一个区块列容器匹配的max-width和margin: 0 auto，内部列用flex: 1分配宽度，无需手动计算百分比，规避精度问题。
• 精确百分比计算方案：用CSS变量统一控制内边距和列间距，比如--padding-x: 13%、--column-gap: 1.5%，列宽通过calc()计算：width: calc((100% - var(--padding-x)*2 - var(--column-gap)*(列数-1))/列数)，确保总宽度精确占满容器。

内容的提问来源于stack exchange，提问作者Damian ProExCurator Dbrowski