CSS Grid如何翻转行排布方向？子元素能否实现列正负偏移缩进？

完全可以仅用CSS Grid实现隔行翻转的效果，不需要用direction的hack方案。你之前出现内容挤压、元素堆叠的问题，是两个基础配置缺失导致的：

• 承载两个子元素的Grid行容器（.grid__item）没有占满父级Grid的全宽，导致Grid生成隐式列压缩内容
• 没有给两个子元素指定同一行轨道，Grid自动排布时会将第二个元素放到下一行

正确的实现步骤如下：

1. 先给每个行容器设置基础Grid属性，确保占满全宽、子元素垂直对齐：

.grid__item {
  display: grid;
  /* 这里的12列和你子元素指定的7/13列对应，可根据需求调整列数 */
  grid-template-columns: repeat(12, 1fr);
  /* 占满父级Grid的整行宽度，解决内容挤压问题 */
  grid-column: 1 / -1;
  /* 统一子元素垂直对齐，解决垂直对齐失效问题 */
  align-items: center;
}

2. 给两个子元素指定同一行轨道，避免堆叠：

.grid__item--image,
.grid__item--caption {
  /* 强制两个元素在同一行 */
  grid-row: 1;
}

3. 用nth-child选择器实现隔行翻转，不需要单独加翻转类：

/* 奇数行：图片占左6列，文字占右6列 */
.grid__item--image {
  grid-column: 1 / 7;
}
.grid__item--caption {
  grid-column: 7 / 13;
}

/* 偶数行翻转排布 */
.grid__item:nth-child(even) .grid__item--image {
  grid-column: 7 / 13;
}
.grid__item:nth-child(even) .grid__item--caption {
  grid-column: 1 / 7;
}

可以实现，比负margin的方案更精准，且适配性更强。
你只需要调整文字元素的grid-column的起始/结束位置即可，比如要让文字往左偏移1列、覆盖1列宽度的图片，直接修改对应的列范围：

/* 从第6列开始，到13列结束，相当于往左偏移了1列，覆盖图片的最右1列 */
.grid__item--caption {
  grid-column: 6 / 13;
}
/* 偶数行的文字要往右覆盖的话，调整结束位置即可 */
.grid__item:nth-child(even) .grid__item--caption {
  grid-column: 1 / 8;
}

关于内容裁剪：只要你没有给父级容器设置overflow: hidden，就不会出现裁剪问题，该方案本质是让文字元素跨列展示，属于Grid的标准用法，比负margin的兼容性和可控性更好。

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