如何创建错位两列grid视图，使第二列相比第一列略向下偏移

实现思路很简单，用Grid原生的等高特性保证两列宽高一致，单独给第二列加偏移量即可，不需要写死宽高，内容可自适应。

核心实现步骤 #

• 给Grid容器设置grid-template-columns: 1fr 1fr实现两列等宽，grid-auto-rows: 1fr实现两列高度自动和最高内容对齐
• 关闭Grid默认的拉伸对齐，给所有列设置height: 100%强制等高
• 给第二列添加顶部偏移，数值可自定义调整错位程度

完整示例代码 #

HTML结构 #

<div class="grid-container">
  <div class="grid-item item1">
    第一列内容<br>
    支持任意长度<br>
    高度会自动同步到第二列
  </div>
  <div class="grid-item item2">
    第二列内容<br>
    整体向下偏移<br>
    宽高和第一列完全一致
  </div>
</div>

CSS样式 #

.grid-container {
  display: grid;
  /* 两列等宽，可根据需求修改为固定宽度如 300px 300px */
  grid-template-columns: 1fr 1fr;
  /* 两列之间的间距，可调整 */
  gap: 24px;
  /* 自动等高，行高跟随最高的列内容 */
  grid-auto-rows: 1fr;
  /* 关闭默认拉伸对齐，方便自定义偏移 */
  align-items: start;
  /* 可选：如果需要避免第二列偏移后超出容器底部，加和偏移量一致的底部内边距 */
  padding-bottom: 30px;
}

.grid-item {
  /* 强制所有列高度和行高一致，保证等高 */
  height: 100%;
  /* 以下为演示用的基础样式，可自行修改 */
  padding: 20px;
  border-radius: 8px;
  background: #f8f9fa;
  box-sizing: border-box;
}

.item2 {
  /* 第二列向下偏移量，按需调整数值即可 */
  margin-top: 30px;
  /* 若需要保留第二列顶部的原有空间，可替换为 transform: translateY(30px) */
}

响应式适配（可选） #

如果需要小屏下切换为单列布局，加媒体查询即可：

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }
  .item2 {
    margin-top: 0;
  }
}

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