如何在同一父容器内让单个元素跨多行与多个元素并列？

需求场景 #

要在单个容器里实现这种布局：左侧是数量不确定的元素（每行一个），右边固定一个元素，垂直贯穿所有左侧元素的高度，布局示意如下：

╔═══════╦═══╗
║       ║   ║
╠═══════╣   ║
║       ║   ║
╠═══════╣   ║
║       ║   ║
╠═══════╣   ║
║       ║   ║
╚═══════╩═══╝

限制条件：不能拆成两个独立容器（现有CSS逻辑复杂，团队改起来成本太高），不想用JavaScript实现。

之前尝试的问题分析 #

• grid-row: 1 / -1：没显式设置grid-template-rows时，Grid没法识别隐式创建的行数量，所以负值索引无效。
• CSS计数器方案：grid-row-end: counter(count)或者grid-template-rows: repeat(counter(count), auto)行不通，因为计数器只能用在content属性里，没法直接当CSS属性值用。
• grid-column: 1 / 99会新增多余行，grid-column: 1 / span 99多数场景能用，但如果左侧元素数量超过99就失效，可靠性不够。

可靠的纯CSS解决方案 #

方案1：Grid调整自动流方向，让grid-row:1/-1生效

改一下Grid的自动排列方向，让容器先按列排布，这样右侧元素的grid-row:1/-1就能正确识别所有行的范围：

.grid-container {
  display: grid;
  grid-auto-flow: column; /* 先列后行，左侧元素自动填满第一列的所有行 */
  grid-template-columns: 1fr auto; /* 左侧自适应宽度，右侧按需分配 */
}

.right-item {
  grid-row: 1 / -1; /* 现在能正确跨所有行，行数量由左侧元素自动决定 */
}

左侧未知数量的元素会自动填充第一列的每一行，右侧元素自然贯穿整个容器高度。

方案2：Flex布局替代Grid（兼容场景更友好）

如果Grid的方案有兼容问题，用Flex也能实现，同样是单容器：

.flex-container {
  display: flex;
}

.right-item {
  flex-shrink: 0; /* 防止右侧元素被压缩变形 */
  align-self: stretch; /* 默认就是这个值，确保高度撑满容器 */
}

.left-group {
  flex: 1; /* 左侧占满剩余宽度 */
  display: flex;
  flex-direction: column; /* 左侧元素垂直排列 */
  gap: 8px; /* 可选，设置左侧元素之间的间距 */
}

这里只是给左侧元素加了个内部包裹层，外层还是单个容器，比拆成两个独立容器的修改成本低很多。

退而求其次的Grid方案（如果不能改自动流）

如果必须用原Grid的自动流设置，那可以把span的数值设大一点，比如grid-row: span 999，只要左侧元素数量不会超过这个数值，就能稳定工作，比span99靠谱得多。

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