Tailwind双Grid组件垂直分隔线与盒子对齐问题求助

原始代码 #

<div class="grid grid-cols-5 divide-x divide-gray-700 text-center">
  <div>Col</div>
  <div>Col</div>
  <div>Col</div>
  <div>Col</div>
  <div>Col</div>
</div>

<div class="grid grid-cols-5 gap-4">
  <div class="h-20 border bg-gray-300"></div>
  <div class="h-20 border bg-gray-300"></div>
  <div class="h-20 border bg-gray-300"></div>
  <div class="h-20 border bg-gray-300"></div>
  <div class="h-20 border bg-gray-300"></div>
</div>

当前第一个Grid使用divide-x添加垂直分隔线，但未设置间隙，导致分隔线与第二个带gap-4的Grid的盒子空隙无法对齐，要求必须保留两个独立Grid，不能合并。

解决方案 #

让两个Grid保持一致的列布局（包括相同间隙），通过子元素右侧边框替代divide-x实现对齐：

<!-- 第一个Grid：设置相同gap，用border-r模拟分隔线 -->
<div class="grid grid-cols-5 gap-4 text-center">
  <div class="border-r border-gray-700">Col</div>
  <div class="border-r border-gray-700">Col</div>
  <div class="border-r border-gray-700">Col</div>
  <div class="border-r border-gray-700">Col</div>
  <div>Col</div>
</div>

<!-- 第二个Grid保持不变 -->
<div class="grid grid-cols-5 gap-4">
  <div class="h-20 border bg-gray-300"></div>
  <div class="h-20 border bg-gray-300"></div>
  <div class="h-20 border bg-gray-300"></div>
  <div class="h-20 border bg-gray-300"></div>
  <div class="h-20 border bg-gray-300"></div>
</div>

原理 #

• 给第一个Grid添加gap-4，使其列宽、间隙与第二个Grid完全匹配
• 移除divide-x，给前4个子元素添加右侧边框，边框位置正好对应第二个Grid盒子之间的间隙，实现精准对齐

如果想简化重复代码，可使用:not(:last-child)选择器：

<div class="grid grid-cols-5 gap-4 text-center">
  <div class="border-r border-gray-700:not(:last-child)">Col</div>
  <div class="border-r border-gray-700:not(:last-child)">Col</div>
  <div class="border-r border-gray-700:not(:last-child)">Col</div>
  <div class="border-r border-gray-700:not(:last-child)">Col</div>
  <div>Col</div>
</div>

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