Grid布局内div宽度不一致问题咨询：为何部分div宽度偏大

你的问题核心是手动指定的网格列跨度和auto-fit + minmax()自动列规则的冲突，具体原因如下：

• 首先看你的网格列定义：grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))，这个规则是让浏览器根据容器宽度自动生成尽可能多的最小150px宽的列，每列均分剩余空间。
• 但你给.div3、.div4、.div5设置了grid-column: 2 / 4，这意味着这几个元素要跨越第2到第4列（共2个网格列）；而.div1、.div2、.div6、.div7仅设置了占1个网格列的规则。
• 所以跨2列的元素宽度自然是占1列元素的两倍左右（加上间隙影响），这就是你看到div3-5宽度明显更大的原因。

两种修正方案 #

方案一：固定列数，保持手动布局

如果想保留当前的跨列布局逻辑，把自动列改成固定4列，这样每列宽度一致，跨列元素的宽度就是单列的2倍：

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 固定4列，每列均分宽度 */
  gap: 2rem;
  width: 100%;
  padding: 1rem;

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

方案二：移除手动跨列，让自动布局生效

如果希望所有div宽度完全一致，删掉所有grid-column和grid-row的手动设置，浏览器会通过auto-fit自动排列所有元素，宽度统一：

/* 移除所有.div1到.div7的grid-column/grid-row规则 */
.div1, .div2, .div3, .div4, .div5, .div6, .div7 {
  /* 无跨列设置，自动填充网格 */
}

总结 #

你的代码中手动指定的跨列范围直接决定了元素的网格占用宽度，和auto-fit的自动列规则结合后，就出现了部分元素宽度更大的现象。根据你的布局需求选择上述任一方案即可解决问题。

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