CSS Grid布局调整：消除item2与item3间距并顶部对齐（不改HTML）

可以通过两种方式实现，无需修改HTML结构：

方法一：调整网格的间距设置 #

将全局的gap拆分为仅设置列间距，行间距设为0，这样item2和item3之间的行间距会被消除，同时align-items: start保持元素与容器顶部对齐：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px; /* 仅保留列间距 */
  row-gap: 0; /* 消除行间距 */
  align-items: start;
}

.item1,
.item2,
.item3 {
  border: 1px solid black;
}

.item1 {
  grid-column: span 1;
  grid-row: span 2;
}

.item1 img {
  width: 80px;
  height: 115px;
}

.item2,
.item3 {
  grid-column: span 1;
  grid-row: span 1;
}

方法二：使用负margin精准抵消间距 #

如果希望保留其他行间距（比如item1和item3之间的间距），可以给item3设置负的上外边距，抵消默认的行gap：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.item1,
.item2,
.item3 {
  border: 1px solid black;
}

.item1 {
  grid-column: span 1;
  grid-row: span 2;
}

.item1 img {
  width: 80px;
  height: 115px;
}

.item2,
.item3 {
  grid-column: span 1;
  grid-row: span 1;
}

/* 新增样式 */
.item3 {
  margin-top: -10px; /* 抵消行gap的10px */
}

两种方法都能让item2和item3紧贴在一起，且保持与容器顶部对齐的效果。

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