使用display:grid制作计算器时出现超大间距问题求助

问题核心 #

你用grid-template-columns: auto auto auto定义Grid列时，这个规则会让三列平分容器的全部可用宽度。但你给每个按键.calc-key设置了固定的width: 100px，容器里剩下的所有空间都会被分配给列的额外宽度，看起来就像是超大的列间距——这跟你设置的gap无关，gap只是单元格之间的真正间距。

修复方案 #

给你三种直接可用的解决办法：

1. 给Grid列设置固定宽度

让列宽和按键的固定宽度完全匹配，这样列不会占用多余空间：

.keys {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 和calc-key的width对应 */
  gap: 0.25px; /* 保留你想要的小间距 */
}

2. 让按键自动填充Grid单元格

去掉按键的固定宽度，改用width: 100%填充所在列，同时给Grid容器设置合理的最大宽度：

.keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等分容器宽度 */
  gap: 0.25px;
  max-width: 306px; /* 3*100px + 2*0.25px，可按需调整 */
  margin: 0 auto; /* 让计算器居中 */
}

.calc-key {
  /* 删除 width: 100px */
  width: 100%;
  height: 100px;
  /* 其他样式保留不变 */
}

3. 固定Grid容器的宽度

如果想保留按键的固定宽度，直接给.keys设置刚好容纳所有按键的宽度：

.keys {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 0.25px;
  width: 300.5px; /* 3个100px按键 + 2个0.25px间距的总宽度 */
}

额外小提示 #

• 你的HTML里id="calc container container-fluid"写法错误，ID不能包含空格，应该改成id="calc" class="container container-fluid"，虽然这不是间距问题的直接原因，但建议修正。
• 如果引入的Bootstrap样式给容器带来了额外的内边距/外边距，可以给.keys加padding: 0来消除影响。

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