Tailwind CSS的divide-width在多行Grid布局中为何不符合预期？

推荐用Grid间隙+背景色模拟分隔线的方法，完美适配响应式布局和任意数量的子元素，还不会出现新行首列带边框的问题，完全不用自定义选择器：

<div class="grid grid-cols-2 gap-x-2 lg:grid-cols-4 bg-gray-200">
  <div class="bg-white p-4">div 1</div>
  <div class="bg-white p-4">div 2</div>
  <div class="bg-white p-4">div 3</div>
  <div class="bg-white p-4">div 4</div>
  <!-- 任意添加子元素都可适配 -->
</div>

• gap-x-2 对应分隔线的宽度，可根据需求调整为gap-x-1（细）、gap-x-4（粗）等
• 容器的bg-gray-200是分隔线的颜色，子元素的bg-white覆盖自身区域背景，仅留列间间隙显示为分隔线
• 响应式断点下只需调整grid-cols参数，分隔线会自动适配列数变化

如果布局要求必须用真实边框，也可以尝试右侧边框+响应式移除每行最后一个元素边框的方法，但该方法仅适合每行元素数量固定的场景（比如移动端固定2列、桌面端固定4列），子元素数量不固定时灵活性较差：

<div class="grid grid-cols-2 lg:grid-cols-4">
  <div class="border-r-2 p-4">div 1</div>
  <div class="border-r-2 p-4 lg:border-r-0">div 2</div>
  <div class="border-r-2 p-4">div 3</div>
  <div class="border-r-2 p-4 border-r-0 lg:border-r-0">div 4</div>
</div>

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