如何在CSS Subgrid中实现跨列行合并并保留列结构？

我有1-3列的布局，目前用grid/subgrid能实现元素垂直对齐，但各列里的Q1这类标题重复显示。想把这些标题改成跨列单行显示，同时保留现有的列式HTML结构，请问怎么用grid/subgrid实现？能不能用Tailwind做？

现有HTML结构 #

<div class="all">
   <div class="col">
      <div class="question">Q1</div>
      <div class="chart">C1.1</div>
      <div class="question">Q2</div>
      <div class="chart">C1.1</div>
      <div class="question">Q3</div>
      <div class="chart">C1.3</div>
   </div>
   <div class="col">
      <div class="question ignore">Q1</div>
      <div class="chart">C2.1</div>
      <div class="question ignore">Q2</div>
      <div class="chart">C2.2</div>
      <div class="question ignore">Q3</div>
      <div class="chart">C2.3<br>bar</div>
   </div>
   <!-- 更多列... -->
</div>

期望效果 #

类似表格的colspan跨列显示标题，同时保留列式HTML结构，示例表格结构如下：

<table>
  <tr>
    <td colspan=3>Q1</td>
  </tr>
  <tr>
    <td>C1.1</td>
    <td>C2.1</td>
    <td>C3.1</td>
  </tr>
</table>

解决方案 #

一、用Grid/Subgrid实现 #

核心是让外层容器成为统一网格，利用display: contents让列容器的子元素直接参与外层网格布局，实现标题跨列：

.all {
  display: grid;
  /* 自动适配列数，每列最小200px */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-flow: dense;
  gap: 1rem;
}

.col {
  /* 让列容器失效，子元素直接属于外层网格 */
  display: contents;
}

/* 隐藏其他列的重复标题 */
.question.ignore {
  display: none;
}

/* 标题跨所有列 */
.question {
  grid-column: 1 / -1;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.chart {
  padding: 1rem;
  border: 1px solid #eee;
}

二、用Tailwind实现 #

Tailwind支持所需的网格属性，直接用工具类就能实现：

修改后的HTML：

<div class="grid grid-cols-auto-fit minmax-[200px,1fr] gap-4 auto-flow-dense">
   <div class="contents">
      <div class="col-span-full font-bold mb-2">Q1</div>
      <div class="p-4 border border-gray-200">C1.1</div>
      <div class="col-span-full font-bold mb-2">Q2</div>
      <div class="p-4 border border-gray-200">C1.1</div>
      <div class="col-span-full font-bold mb-2">Q3</div>
      <div class="p-4 border border-gray-200">C1.3</div>
   </div>
   <div class="contents">
      <div class="hidden">Q1</div>
      <div class="p-4 border border-gray-200">C2.1</div>
      <div class="hidden">Q2</div>
      <div class="p-4 border border-gray-200">C2.2</div>
      <div class="hidden">Q3</div>
      <div class="p-4 border border-gray-200">C2.3<br>bar</div>
   </div>
   <!-- 第三列同理 -->
</div>

工具类说明：

• grid：设置为网格容器
• grid-cols-auto-fit minmax-[200px,1fr]：自动适配列数（Tailwind v3.3+支持），固定列数可换成grid-cols-3
• auto-flow-dense：优化跨列元素的布局
• contents：让列容器的子元素直接归属外层网格
• col-span-full：标题跨所有列
• hidden：隐藏重复标题

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