为何使用固定单位的CSS Grid会延伸至视口宽度？

你遇到的核心问题是块级Grid容器的默认宽度规则：当设置display: grid时，容器默认是块级元素，会自动占满父容器的可用宽度（此处父容器为body，默认撑满视口），和内部网格项的总宽度无关。

两种单位的差异原因 #

1. 固定单位（px/vw）场景：
   你设置3列各100px，网格项总宽度300px，但Grid容器作为块级元素，宽度仍为100%视口宽度，所以黑色边框会延伸到视口两侧，网格项仅占容器左侧300px区域，剩余部分是容器的空白。

2. fr单位场景：
   fr单位的作用是分配Grid容器的可用空间，3个1fr会把容器的整个宽度（默认100%视口）平均分成3份，网格项填满容器全部宽度，因此看起来容器刚好是3列的宽度。

解决方法：让容器宽度贴合网格项 #

如果想让固定单位的Grid容器只包裹网格项的实际宽度，给容器添加以下任意一个属性即可：

方法1：使用width: fit-content

.tictactoe-board {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  border: 1px solid black;
  width: fit-content; /* 让容器宽度适配内容 */
}

方法2：改为行内Grid容器

.tictactoe-board {
  display: inline-grid; /* 行内块级，宽度由内容决定 */
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  border: 1px solid black;
}

添加后，容器会自动收缩到网格项的总宽度（300px+边框），不再撑满视口。

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