如何让CSS Grid合并单元格后保持所有单元格尺寸一致？

我尝试了以下代码，但box6的尺寸比其他盒子小：

.factory {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  height: 600px;
  gap: 10px;
  margin-top: 100px;
  padding: 10px;
}

.factory>div {
  background-color: gray;
  border: 1px green solid;
}

.image-1 {
  width: 100%;
  height: auto;
}

.div-3 {
  grid-column: 3 / span 5;
}

.div-5 {
  grid-column: 1 / span 2;
}

<div class="factory">
  <div class="div-1">box1</div>
  <div class="div-2">box2</div>
  <div class="div-3">box3</div>
  <div class="div-5">box5</div>
  <div class="div-6">box6</div>
</div>

问题原因 #

你的代码中div-3使用了grid-column: 3 / span 5，但仅定义了3列显式网格轨道，这会触发CSS Grid自动创建5个隐式列，而隐式列的默认宽度为auto，并非你设定的比例值。box6被放置在这个隐式列中，因此宽度远小于其他基于显式列的盒子。另外，grid-template-columns: 1fr 1fr 2fr的设定本身就让前两列与第三列宽度不同，也会加剧尺寸差异。

解决方案 #

方案1：统一基础列尺寸，避免隐式列

如果希望未合并的单元格（box1、box2、box6）宽度完全一致，合并单元格（box3、box5）为多倍宽度，建议先定义等宽显式列，再通过span控制合并范围：

.factory {
  display: grid;
  /* 定义3个等宽列，每列占1份空间 */
  grid-template-columns: repeat(3, 1fr);
  height: 600px;
  gap: 10px;
  margin-top: 100px;
  padding: 10px;
}

.factory>div {
  background-color: gray;
  border: 1px green solid;
}

/* 让box3正常占据第三列 */
.div-3 {
  grid-column: 3 / span 1;
}

/* box5合并前两列，宽度为2倍基础列 */
.div-5 {
  grid-column: 1 / span 2;
}

此方案下，所有未合并单元格宽度均为1fr，高度会平分容器600px高度（减去gap），实现尺寸一致。

方案2：指定隐式列宽度，匹配显式列比例

如果需要保留原有的1fr 1fr 2fr列比例，可通过grid-auto-columns强制隐式列宽度与第三列一致：

.factory {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  /* 让隐式列宽度匹配第三列的2fr */
  grid-auto-columns: 2fr;
  height: 600px;
  gap: 10px;
  margin-top: 100px;
  padding: 10px;
}

.factory>div {
  background-color: gray;
  border: 1px green solid;
}

/* 让box3占据从第三列到最后一列的空间，无需手动指定span数量 */
.div-3 {
  grid-column: 3 / -1;
}

.div-5 {
  grid-column: 1 / span 2;
}

此方案下，box6会放在宽度为2fr的隐式列中，与box3宽度一致；box1、box2保持1fr宽度，所有单元格高度统一。

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