如何调整Tailwind Grid列间距：移除首尾1fr列与相邻列间隙

你的问题在于当前代码使用了全局的lg:gap-x-6，导致所有列之间都添加了6px的横向间隙，包括首尾1fr列和相邻的84px列。要实现仅中间12列之间保留间隙、首尾列与相邻列无缝的效果，可以通过在网格列定义中直接嵌入间隙的方式解决，具体代码修改如下：

@layer components {
    .desktop-grid {
        @apply  
            lg:grid
            lg:grid-cols-[1fr_84px_repeat(11,6px_84px)_1fr]
            lg:mx-auto;
                  }
}

原理说明： #

• 移除全局的lg:gap-x-6，避免给所有列之间添加统一间隙
• 在grid-cols的自定义列定义中：
  • 开头直接定义1fr 84px，让首列1fr与第二列84px无缝衔接
  • 用repeat(11, 6px 84px)重复11次“6px间隙 + 84px列”，确保中间12个84px列之间保留6px间距
  • 结尾定义1fr，让最后一个84px列与尾列1fr无缝衔接

这样既保留了中间12列的预设间隙，又实现了首尾1fr列与相邻列无间隙的需求。

内容的提问来源于stack exchange，提问作者Carlos Raúl Cárcamo Tejada