CSS Grid子元素字体大小调整导致网格方块尺寸不一致的问题求助

嘿，我来帮你搞定这个问题！你遇到的核心原因是：当前你的Grid用了auto来定义列宽，而auto会根据单元格里的内容大小自动调整尺寸——当你把+号的字体调大后，对应的单元格内容宽度/高度变大，就把整个Grid的列和行都撑变形了。

下面是具体的解决方案，我帮你修改了CSS代码，保证每个方块大小一致，同时内容完美居中：

修改后的CSS代码 #

* { 
  margin: 0; 
  padding: 0; 
}

html, body { 
  height: 100%; 
}

main { 
  margin: 20px; 
  width: calc(100% - 40px); 
  height: calc(100% - 40px); 
  display: grid;
  /* 用repeat(3,1fr)让三列/三行平均分配容器空间，替代auto */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px; 
}

.square { 
  border: solid 1px black;
  /* 用flex布局让内部内容自动居中，替代原来的定位方式 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.square>div { 
  font-size: 16px; 
}

.plus>div { 
  font-size: 80px; 
}

关键修改点说明： #

• grid-template-columns: repeat(3,1fr) 和 grid-template-rows: repeat(3,1fr)：1fr是“份数”单位，三列各占1份，三行各占1份，这样不管内容多大，每个方块都会平分容器的宽高，尺寸完全一致。
• 给.square添加flex居中：原来用top: calc(50% - 1em)的方式依赖固定字体大小，很容易出问题；flex布局可以自动让内部的X或+号垂直水平居中，不管字体怎么调都不会错位。
• 删掉了.square>div里的width: max-content、height: max-content和定位属性，这些属性会让内容撑大单元格，现在用flex居中后完全不需要它们。

如果之后你想把方块改成固定大小（比如每个都是200px×200px），只需要把1fr换成具体数值就行，比如grid-template-columns: repeat(3, 200px)，效果同样稳定~

内容来源于stack exchange