CSS Grid布局中如何偏移首列内容且不影响列高

你遇到的问题是因为网格布局中，网格项的margin会被纳入网格行的高度计算，给第一个元素加margin-top会撑大整个行的高度，导致第二列元素跟着下移。下面提供几种可行的解决方法：

方法1：使用transform平移（最简单） #

通过transform: translateY()视觉上移动元素，不会改变网格的布局结构，第二列元素的位置不受影响：

.grid .item:first-child {
  transform: translateY(105px);
}

方法2：相对定位偏移 #

相对定位仅改变元素的视觉位置，不影响网格布局流，效果与transform类似：

.grid .item:first-child {
  position: relative;
  top: 105px;
}

方法3：利用网格行定位（布局更严谨） #

通过定义网格行结构，调整元素所在的行来实现偏移，适合需要严格控制布局层级的场景：

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 105px auto; /* 第一行高度设为需要偏移的距离 */
  grid-gap: 20px;
}
/* 调整元素所在的行 */
.grid .item:first-child {
  grid-row: 2;
}
.grid .item:nth-child(2) {
  grid-row: 1;
}

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