如何解决CSS Grid中行出现意外宽间隙的问题？

嘿，我瞅了下你贴的代码，一眼就发现了关键问题——item3里的属性名拼写出错啦！你写的grid-colum...应该是grid-column-start和grid-column-end（或者用更简洁的grid-column简写形式）。浏览器碰到无法识别的属性会直接忽略，这就导致item3的布局完全没按你的预期来，自然就出现了奇怪的行间隙。

先给你修正后的完整代码：

main { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-column-gap: 10px; 
  grid-row-gap: 10px; 
}
article { background: red; }
.item1 { 
  height: 30px; 
  grid-column-start: 1; 
  grid-column-end: 2; 
  grid-row-start: 1; 
  grid-row-end: 2; 
}
.item2 { 
  height: 100px; 
  grid-column-start: 1; 
  grid-column-end: 2; 
  grid-row-start: 2; 
  grid-row-end: 3; 
}
.item3 { 
  height: 300px; 
  grid-column-start: 2; /* 修正拼写错误，这里假设你想让它占第2列 */
  grid-column-end: 3; 
  grid-row-start: 1; 
  grid-row-end: 3; 
}

另外再给你几个排查这类Grid布局问题的小技巧：

• 仔细检查所有Grid相关属性的拼写，像grid-column、grid-row这类很容易少写字母
• 打开浏览器开发者工具（按F12），切换到Grid布局面板，能直观看到每个网格项的位置和网格轨道的尺寸，快速定位间隙来源
• 如果排除了拼写问题，还要检查网格项有没有默认的margin、padding，或者align-items、justify-items是否设置了非stretch的值，这些也可能导致意外的空白间隙

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