如何使用CSS Grid配合嵌套Vue v-for循环实现符合预期的表格布局

问题根因 #

你当前代码的核心问题是内层v-for外包裹了一层多余的<div>容器：CSS Grid的布局规则仅作用于容器的直接子元素，你额外增加的这层div打断了Grid的子元素层级，导致.B、.C的grid-column配置无法生效。
另外补充grid-column的参数逻辑：grid-column: 起始网格线 / 结束网格线，2列布局下共有3条网格线，所以跨两列的正确写法就是1/3，1/2表示仅占第一列（网格线1到网格线2之间），你之前的写法没有语法错误。

修复方案 #

使用Vue的<template>标签替代内层v-for外的div即可，<template>是虚拟占位元素，渲染后不会生成真实DOM，不会破坏Grid的直接子元素结构，同时也支持后续扩展多层嵌套循环。

完整实现代码如下：

<template>
  <div style="width:100%">
    <div v-for="(res, key) in results" :key="key" class="results">
      <div class="A">{{ res.a }}</div>
      <!-- 用template做内层循环，不生成额外DOM节点 -->
      <template v-for="(c, b) in res.rows" :key="b">
        <div class="B">{{ b }}</div>
        <div class="C">{{ c }}</div>
        <!-- 后续需要第三层循环的话，同样用template包裹即可 -->
        <!-- <template v-for="(val, k) in c" :key="k">
          自定义层级的样式和展示逻辑
        </template> -->
      </template>
    </div>
  </div>
</template>

<style scoped>
.results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #000;
  border-bottom: none;
}
.A {
  font-weight: bold;
  grid-column: 1 / 3;
  padding: 0.5rem;
  border-bottom: 1px solid #000;
}
.B, .C {
  padding: 0.5rem;
  border-bottom: 1px solid #000;
}
.B {
  grid-column: 1;
  border-right: 1px solid #000;
}
.C {
  grid-column: 2;
}
</style>

多层嵌套适配说明 #

后续如果需要新增第三层甚至更多层级的循环，都可以用<template>做占位容器，根据嵌套层级调整grid-column的占比、缩进即可，Grid的布局灵活性可以支撑任意层级的嵌套展示，做响应式调整时也只需要修改grid-template-columns等配置，比传统table方案灵活度高很多。

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