如何在TailwindCSS网格布局中添加列分隔线？

针对你要在响应式网格的每两列中间加居中分隔线、且外边缘不显示的需求，结合Tailwind CSS可以用这两种方法实现：

方法一：容器伪元素法（适配任意动态列数） #

这种方式不用改现有列的结构，靠网格容器的伪元素生成分隔线，自动适配不同屏幕的列数变化：

1. 先给网格容器设置左右负内边距，抵消外边缘的分隔线，同时保留列间隙作为分隔线的位置：

   <!-- 用gap-8为例，负内边距取gap的一半 -->
   <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 px-[-4px] gap-8 relative">
     <!-- 你的列内容 -->
   </div>
   

2. 自定义一个Tailwind工具类，用伪元素生成垂直分隔线，自动匹配列数-1的数量：

   @layer utilities {
     .col-dividers {
       &::before {
         content: "";
         position: absolute;
         top: 0;
         bottom: 0;
         width: 1px;
         background-color: #e5e7eb; /* 替换成你要的分隔线颜色 */
         /* 定位到每列的间隙中间 */
         grid-column: repeat(calc(var(--cols) - 1), span 1);
         transform: translateX(50%);
       }
     }
   }
   

3. 给网格容器加上这个工具类，同时在响应式断点处更新列数变量：

   <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 px-[-4px] gap-8 relative col-dividers [--cols:2] md:[--cols:3] lg:[--cols:4]">
     <!-- 你的列内容 -->
   </div>
   

   这样不管屏幕怎么变，分隔线只会出现在列与列的中间，不会跑到网格外边缘。

方法二：列元素边框法（直观简洁） #

直接给列加右侧边框，然后排除每一个断点下的最后一列边框：

1. 给所有列默认加右侧边框，然后在不同断点下，给最后一列去掉边框：

   <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
     <div class="border-r border-gray-200">列1</div>
     <div class="border-r border-gray-200 md:border-r-0 lg:border-r">列2</div>
     <div class="border-r border-gray-200 lg:border-r-0 hidden md:block">列3</div>
     <div class="hidden lg:block">列4</div>
   </div>
   

   比如在md断点下，第三列是最后一列，就给它加md:border-r-0；lg断点下第四列是最后一列，就不用加边框。

方案选择建议 #

• 要是你的列数是动态生成的（比如从后端获取数据），优先用方法一，不用逐个处理列的边框；
• 要是列数固定、响应式断点明确，方法二更简单，代码量更少。

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