如何使用CSS盒模型实现多列等宽布局？-css教程-PHP中文网

box-sizing: border-box不能解决等宽问题，因其仅控制宽高是否包含padding/border，不影响列分配逻辑；真正实现等宽需依赖grid+fr单位，如repeat(3, 1fr)按份数均分剩余空间，与内容无关。

如何使用css盒模型实现多列等宽布局？

直接用 display: grid 配合 repeat() 和 1fr，别碰 float 或硬写 width: 33.333% —— 盒模型本身不负责“等宽列”，那是布局上下文（flex 或 grid）的事，box-sizing 只影响 padding/border 是否挤占 width，它不能让多列自动均分。

为什么 box-sizing: border-box 不能解决等宽问题

box-sizing: border-box 的作用是让 width 包含 padding 和 border，避免子项因内边距撑出容器。但它对“列怎么分”毫无影响：

在 flex 容器里设 box-sizing: border-box，但没控制 flex-basis，列依然会因内容长度不同而宽窄不一
在普通 block 流中，即使所有子项都设了 width: 33.333% 和 box-sizing: border-box，浮动不清除或未设 float 就根本排不成行
它不修复小数精度误差（如 33.333% × 3 = 99.999%），也不阻止浏览器把 input 默认 min-width 当作 flex 基准

真正起效的组合：grid + fr 单位

等宽列的本质是“按份数瓜分可用空间”，fr 就是为此设计的单位。以下写法在 iOS 15+、Android Chrome 110+ 中稳定：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

repeat(3, 1fr) 表示严格三列，每列拿走 1/3 的剩余空间，不依赖内容宽度
gap 独立于列宽计算，不会导致最后一列换行（对比 margin 易引发外边距折叠或溢出）
无需 box-sizing 干预 —— fr 分配的是容器内可用空间，padding/border 自动从各列内部扣除

flex 场景下必须补 calc() 才能勉强等宽

如果非要用 flex（比如要兼容旧版 Safari），flex: 1 在移动端基本不可靠。必须显式锁定基础宽度：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item {
  flex: 0 0 calc(33.333% - 8px); /* 假设 gap 总和为 8px */
  box-sizing: border-box;
}