在Tailwind网格布局中添加垂直网格线的实现问题

我完全懂你现在的头疼之处——想用Tailwind做带垂直网格线的甘特图布局，本以为叠加个subgrid层就能匹配原有列宽，结果叠加层直接变成了全宽行，完全偏离预期。咱们来一步步把这个问题捋顺解决：

问题根源 #

你加的那个绝对定位<div>虽然带了grid-cols-subgrid，但它因为用了absolute inset-0脱离了父级网格的文档流，不再是父网格的grid item，自然没法继承父级的列结构，subgrid规则相当于白加，最后只能默认排成一行。

解决方案：让网格线层正常继承列结构 #

我们换个思路：把网格线层作为父网格的顶级grid item，和Header、Data层同级，这样它就能正常继承父级的列结构，同时通过层级控制让它覆盖在内容下方（或者上方）。

修改后的完整代码如下：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="relative grid grid-cols-[auto_auto_120px_90px_100px]">
  <!-- 网格线层：作为顶级grid item，继承父级列结构 -->
  <div class="col-span-full grid grid-cols-subgrid h-full [&>*+*]:border-l-1 border-gray-300"></div>
  
  <!-- Header：加层级确保内容在网格线上方 -->
  <div class="col-span-full grid grid-cols-subgrid items-center rounded-md bg-neutral-100 relative z-10">
    <span>Column 1</span>
    <span>Column 2</span>
    <span>Column 3 (Month 1)</span>
    <span>Column 4 (Month 2)</span>
    <span>Column 5 (Month 2)</span>
  </div>
  
  <!-- Data：同样加层级控制 -->
  <div class="col-span-full grid grid-cols-subgrid relative z-10">
    <span>Data 1.1</span><span>Data 2.1</span><span class="col-start-3 col-end-6">Data 3.1 (bar)</span>
    <span>Data 1.2</span><span>Data 2.2</span><span class="col-start-3 col-end-6">Data 3.2 (bar)</span>
    <span>Data 1.3</span><span>Data 2.3</span><span class="col-start-3 col-end-6">Data 3.2 (bar)</span>
  </div>
</div>

关键修改点说明 #

1. 网格线层的定位：把它作为父网格的顶级item，加上col-span-full grid-cols-subgrid，就能完美继承父级的5列结构，每一个空<div>对应一列。
2. 层级控制：给Header和Data层加relative z-10，确保文字内容能覆盖在网格线上方，不会被线条挡住。
3. 垂直网格线实现：用[&>*+*]:border-l-1给每一列（除了第一列）的左侧加边框，自动匹配原有列宽，不管是自适应的auto列还是固定宽列都能正常工作。
4. 修正笔误：你原来代码里的-col-end-1是无效语法，改成col-end-6（父级共5列，col-end-6对应最后一列的结束位置）才能让内容跨列显示。

更简化的替代方案（不用额外叠加层） #

如果不想多一个层级，也可以直接给内容层的列之间加边框，结构更简洁：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="grid grid-cols-[auto_auto_120px_90px_100px]">
  <!-- Header -->
  <div class="col-span-full grid grid-cols-subgrid items-center rounded-md bg-neutral-100 [&>*+*]:border-l-1 border-gray-300">
    <span>Column 1</span>
    <span>Column 2</span>
    <span>Column 3 (Month 1)</span>
    <span>Column 4 (Month 2)</span>
    <span>Column 5 (Month 2)</span>
  </div>
  
  <!-- Data -->
  <div class="col-span-full grid grid-cols-subgrid [&>*+*]:border-l-1 border-gray-300">
    <span>Data 1.1</span><span>Data 2.1</span><span class="col-start-3 col-end-6">Data 3.1 (bar)</span>
    <span>Data 1.2</span><span>Data 2.2</span><span class="col-start-3 col-end-6">Data 3.2 (bar)</span>
    <span>Data 1.3</span><span>Data 2.3</span><span class="col-start-3 col-end-6">Data 3.2 (bar)</span>
  </div>
</div>

这两种方式都能完美实现你想要的垂直网格线效果，完全贴合原有布局的列宽。

内容来源于stack exchange