如何让div内9个不同文本按钮均等占1/9空间且支持响应式缩放

问题根源 #

• 当前使用的行内布局+br换行的方式本身不适合做均匀分块布局：button默认是inline-block元素，文本长度不同会触发基线对齐偏移，加上br自带的行高特性，自然会出现错位
• 未统一盒模型：button默认自带padding、border属性，这些属性会额外占用元素宽高，你用calc(100%/3)计算的尺寸没有把这部分消耗算进去，会出现宽度超出容器的问题，进一步打乱布局
• 固定尺寸计算适配性差，无法动态响应容器尺寸变化

最优实现方案（CSS Grid，无JS） #

Grid布局是九宫格场景的原生解决方案，只需要几行CSS就能实现全部需求：无需手动计算尺寸、自动均分空间、自适应容器大小、不受文本内容影响。

完整代码示例

/* 容器样式 */
.grid-container {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  padding: 0;
  /* 核心grid配置 */
  display: grid;
  /* 平均分3列，每列宽度占1/3 */
  grid-template-columns: repeat(3, 1fr);
  /* 平均分3行，每行高度占1/3 */
  grid-template-rows: repeat(3, 1fr);
}
/* 按钮样式 */
.grid-container button {
  /* 统一盒模型，border和padding不会额外占宽高 */
  box-sizing: border-box;
  border-radius: 0;
  /* 可选配置1：文本过长时自动折行 */
  word-break: break-all;
  /* 可选配置2：文本过长不折行，溢出显示省略号
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  */
}

<div class="grid-container">
  <button>I am a different button!</button>
  <button>Hello world!</button>
  <button>Hello world!</button>
  <button>I'm different too!</button>
  <button>Hello world!</button>
  <button>foo bar foo bar</button>
  <button>Hello world!</button>
  <button>Hello world!</button>
  <button>So am I!</button>
</div>

效果说明

• 所有按钮自动均分容器空间，每个始终占1/9大小，完全不受内部文本长度影响
• 容器宽高任意调整（包括响应窗口resize），按钮都会自动适配缩放，无需修改CSS
• 代码结构干净，不需要额外的br标签做换行

兼容方案（Flex布局，适配低版本浏览器） #

如果需要兼容不支持Grid的老旧浏览器，可以用Flex布局实现：

.flex-container {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.flex-container button {
  box-sizing: border-box;
  width: 33.3333%;
  height: 33.3333%;
  border-radius: 0;
  /* 可添加和Grid方案相同的文本溢出处理规则 */
}

HTML结构和Grid方案完全一致，不需要br标签。

内容的提问来源于stack exchange，提问作者Harry