CSS Grid实现左列5行右列3行不等行数布局问题

我希望实现如下Grid网格布局：

核心需求为第一列共5行，第二列共3行。以下是我尝试编写的实现代码：

CSS样式：

.tableGrid {
  display:grid; 
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5); 
  row-gap: 6px;
}

结构代码：

<div className='tableGrid'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

上述代码实际渲染为两列各4行的效果，无法实现一列5行、另一列3行的预期布局。我了解到可通过repeat属性调整行配置，但在该场景下未生效，寻求可行的实现方案。

代码不生效有两个直接原因：

• repeat() 函数语法错误：该函数要求必须传入两个参数，分别是重复次数、轨道尺寸，你写的repeat(5)缺少尺寸参数，这条CSS规则完全不生效，Grid会启用自动布局，按子项总数均分行列，8个子项配2列自然会排成4行。
• 没有给子项设置跨行属性：Grid默认每个子项仅占用1个行轨道，不手动指定跨幅的话，所有格子大小一致，不可能出现两列行数不同的效果。

直接定义5个等高的行轨道，给第二列的3个子项分别设置行跨幅，让3个元素的总占行高度和第一列5行对齐即可：

.tableGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 正确写法：重复5次，每次行高1fr，和列宽逻辑一致 */
  grid-template-rows: repeat(5, 1fr);
  row-gap: 6px;
  /* 可按需添加列间距 */
  column-gap: 6px;
}
/* 第二列三个元素分别设置跨行行数，总和2+2+1=5，和第一列总高度匹配 */
.tableGrid > div:nth-child(2) {
  grid-row: span 2;
}
.tableGrid > div:nth-child(4) {
  grid-row: span 2;
}
.tableGrid > div:nth-child(6) {
  grid-row: span 1;
}
/* 可选：给格子加基础样式方便调试，可根据需求删除 */
.tableGrid > div {
  border: 1px solid #e5e7eb;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

原有JSX结构不需要做任何修改，直接使用即可实现预期效果。

注意：如果第二列的3个格子不需要按2:2:1分配高度，也可以调整span的数值，只要三个元素的span总和等于总行数5，就能和第一列完全对齐。

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