如何通过CSS在Subgrid中合并列内行并保持后续行对齐？

需求说明 #

现有基于CSS Grid和Subgrid实现的两列布局，每列包含多行DIV，需实现以下效果：

• 合并每列的第2行与第3行，确保两列的第4行起始位置对齐
• 第一列第2行的红色区域消除，第2行文本直接衔接第3行文本
• 第二列第3行的红色区域填充空白，高度匹配第一列合并后的行高
• HTML由CMS生成，无法修改结构，仅能通过CSS调整

原代码示例 #

CSS

.main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.column {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}

.column .row-blue { background: blue; }
.column .row-red { background: red; }
.column .row-yellow { background: yellow; }
.column .row-green { background: green; }

HTML

<div class="main">
  <div class="column">
    <div class="row row-blue">Column 1 row 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa vel enim porttitor aliquam vel eget leo. Quisque vitae vulputate tellus.</div>
    <div class="row row-red row2">Column 1 row 2</div>
    <div class="row row-green row3">Column 1 row 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa vel enim porttitor aliquam vel eget leo. Quisque vitae vulputate tellus.</div>
    <div class="row row-yellow">Column 1 row 4</div>
  </div>
  <div class="column">
    <div class="row row-yellow">Column 2 row 1</div>
    <div class="row row-blue row2">Column 2 row 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa vel enim porttitor aliquam vel eget leo. Quisque vitae vulputate tellus.</div>
    <div class="row row-red row3">Column 2 row 3</div>
    <div class="row row-green">Column 2 row 4</div>
  </div>
</div>

解决方案 #

核心思路是利用Subgrid的行共享特性，调整行的跨占规则与元素嵌套关系：

.main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  /* 显式定义主网格的4行，确保子网格继承统一的行结构 */
  grid-template-rows: auto auto auto auto;
}

.column {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}

/* 第一列：合并第2、3行，消除红色行占位 */
.column:first-child .row2 {
  grid-row: span 2;
  display: grid;
  background: transparent; /* 隐藏红色背景 */
}
.column:first-child .row3 {
  grid-row: 1 / -1; /* 填充红色行的整个跨占区域，实现文本衔接 */
}

/* 第二列：让第3行跨占两行，自动匹配第一列合并后的行高 */
.column:last-child .row3 {
  grid-row: span 2;
}

/* 保留原有背景样式 */
.column .row-blue { background: blue; }
.column .row-red { background: red; }
.column .row-yellow { background: yellow; }
.column .row-green { background: green; }

效果参考 #

原理说明 #

• 主网格显式定义行结构，确保子网格Subgrid能继承统一的行基准
• 第一列通过让红色行跨占2行并转为容器，让后续行填充整个区域，既消除红色空白又实现文本衔接
• 第二列让红色行跨占2行，借助Subgrid的行高度同步特性，自动匹配第一列合并后的行高，保证两列第4行对齐

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