如何使用CSS grid-template-areas实现元素跨多个网格（计算器实践）

问题原因 #

你代码里存在两个核心问题导致布局异常：

1. grid-template-areas 属性第三行拼写错误：你写了不存在的区域名fix，实际对应数字6的区域名是six，这个错误直接破坏了网格的行列映射规则
2. 没有明确指定网格列宽规则，部分浏览器默认网格列宽计算会出现偏移

修复步骤 #

1. 修改App.css里的.App样式

修正拼写错误，同时补充列宽配置：

.App {
  display: grid;
  /* 明确指定4列等宽 */
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "ac polarity percent divide"
    "seven eight nine multi"
    /* 把原来的fix改成six */
    "four five six minus"
    "one two three plus"
    "zero2 zero2 dot1 equal";
  text-align: center;
  /* 可选：加按钮间距更符合计算器效果 */
  gap: 4px;
}

2. 可选优化

如果按钮还是存在尺寸异常，可以给所有按钮加宽高100%的通用样式：

/* 给Button和NumberButton组件根元素加该类，或者直接在全局样式指定 */
.calc-btn {
  width: 100%;
  height: 48px;
  border: none;
  font-size: 18px;
}

修改完成后0按钮就会正常占据前两列宽度，布局会和参考效果一致。

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