Grid布局网格项添加文本后沿X轴被撑开问题求助

首先，你的CSS里存在拼写错误：grid-template-colums 应为 grid-template-columns（少了字母n）。这个错误会导致浏览器忽略该列宽定义，改用默认的auto列宽，网格项自然会随内容被撑开。

修复拼写后，为彻底避免内容撑开网格项，给所有网格项添加以下样式：

.gridbox > div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 防止内容过大溢出时撑开单元格 */
}

设置后，每个网格项会占满所在的Grid单元格，文本在单元格内居中显示，不会再撑宽单元格。

另外，你给每个网格项单独设置grid-row-start/grid-column-start等属性可以省略——Grid布局会自动按顺序排列3x3的网格项，能简化代码。

完整修正后的CSS示例：

.gridbox{
  width: 400px;
  height: 400px;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 修复拼写错误 */
  grid-template-rows: repeat(3, 1fr);
  border: 3px solid #484848;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  cursor: pointer;
}

.gridbox > div {
  border: 1px solid #484848;
  background-color: #fff;
  font-size: 80px;
  color: black;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

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