基于Grid规范实现网格项目子元素的同行等高对齐需求

嘿，我完全get到你的需求了——不想对齐那些中间子容器，而是直接把内部的内容元素当作网格项目来处理，还要保证每行里的单元格高度一致，同时各行之间完全独立，第一行header跨2行、第二行header跨3行对吧？这其实用独立行组网格的方案就能完美实现，下面给你一步步拆解：

核心思路 #

不要把整个大容器做成一个单一的Grid，而是把每一行（或者说每一组需要独立对齐的行）单独做成一个Grid容器。这样每个行组内部的单元格会自动等高，而且行组之间的高度完全互不影响，同时我们可以直接把需要对齐的内容元素放进这个行组Grid里，跳过中间的子容器层级。

代码实现 #

HTML结构 #

我们把每一行组单独封装，直接把header和内容元素作为行组Grid的子元素：

<!-- 第一行组：header跨2行 -->
<div class="row-group row-group-1">
  <div class="header">第一行Header（占2行）</div>
  <div class="grid-item">内容1</div>
  <div class="grid-item">内容2<br>多行内容，测试高度</div>
  <div class="grid-item">内容3</div>
</div>

<!-- 第二行组：header跨3行 -->
<div class="row-group row-group-2">
  <div class="header">第二行Header（占3行）</div>
  <div class="grid-item">内容A</div>
  <div class="grid-item">内容B<br>更多<br>多行内容<br>测试高度</div>
  <div class="grid-item">内容C</div>
</div>

CSS样式 #

关键是给每个行组设置Grid属性，然后控制header的跨行数：

/* 通用行组样式：每个行组都是独立的网格容器 */
.row-group {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* 四列布局，可按需调整列宽比例 */
  gap: 1.2rem; /* 单元格之间的间距 */
  margin-bottom: 2rem; /* 行组之间的间距，区分开各行 */
}

/* 第一行组：定义2行，header跨2行 */
.row-group-1 {
  grid-template-rows: auto auto; /* 两行高度由内容自动撑开 */
}
.row-group-1 .header {
  grid-row: span 2; /* 让header占据2行高度 */
  /* 可选：如果需要header内部内容对齐，用Flex控制 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  padding: 1rem;
}

/* 第二行组：定义3行，header跨3行 */
.row-group-2 {
  grid-template-rows: auto auto auto; /* 三行高度由内容自动撑开 */
}
.row-group-2 .header {
  grid-row: span 3; /* 让header占据3行高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  padding: 1rem;
}

/* 网格项目样式：自动占满所在行的高度，内部内容可自定义对齐 */
.grid-item {
  display: flex;
  align-items: flex-start; /* 内部内容顶部对齐，可改为center/bottom */
  padding: 1rem;
  border: 1px solid #ddd;
}

关键细节说明 #

• 各行独立：每个行组是独立的Grid容器，所以第一行的单元格高度完全不会影响第二行，各行的高度由自身内容决定
• 单元格等高：Grid布局默认会让同一行的单元格高度一致，所以行组里的所有内容元素都会自动和该行最高的单元格等高
• 内部内容对齐：通过给.grid-item设置Flex属性，你可以自由控制内部内容的对齐方式（顶部、居中、底部都可以），完全跳过了中间子容器的限制
• 灵活调整：如果需要调整列宽，修改grid-template-columns的比例即可（比如2fr 1fr 1fr 1fr让header列更宽）；如果需要更多行组，只需要复制行组结构，修改grid-template-rows和grid-row: span N的数值就行

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