如何让Tailwind CSS网格第二列内容左对齐，始终贴紧与第一列的间隔？

核心修改点 #

1. 替换网格列配置：将原grid-cols-2 sm:grid-cols-3改为grid-cols-[auto_auto] sm:grid-cols-[auto_auto_1fr]，auto单位让前两列自动匹配内容宽度，1fr让第三列占满所有剩余空间，从根本上避免列宽等分导致的空白问题
2. 删除主容器上的justify-end属性，该属性会让网格整体右对齐，是第二列偏移的核心诱因
3. 优化第三列显示逻辑，小屏幕下直接隐藏，避免冗余占位

备注：如果项目未开启Tailwind JIT模式，可在tailwind.config.js的theme.extend中添加自定义网格列配置，替代方括号语法：

module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        '2-auto': 'auto auto',
        '3-auto-fit': 'auto auto 1fr',
      }
    }
  }
}

然后主容器类改为grid grid-cols-2-auto sm:grid-cols-3-auto-fit即可。

修改后完整代码 #

<div class="grid grid-cols-[auto_auto] sm:grid-cols-[auto_auto_1fr] gap-4 md:gap-2 bg-black"> <!-- 移除了justify-end，修改了网格列配置 -->
  <div class="sm:px-3 max-w-max whitespace-nowrap bg-yellow-300"> <!-- 移除了多余的place-content-end -->
    <p class="text-zagblue text-base sm:text-base font-bold text-right align-bottom mb-5">Xxxxxxx rating:</p>
    <p class="text-zagblue text-base sm:text-base font-bold text-right align-bottom mb-5">Yyyyy & yyyy rating:</p>
    <p class="text-zagblue text-base sm:text-base font-bold text-right align-bottom mb-5">Qqqqqqqq(s) rating:</p>
    <p class="text-zagblue text-base sm:text-base font-bold text-right align-bottom mb-5">Wwwwwww rating:</p>      
  </div>
  <div class="max-w-max whitespace-nowrap bg-green-200"> <!-- 移除了多余的place-content-start -->
    <div class="mb-4 align-top">
      <div>         
        <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
        <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
        <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
        <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
        <fa icon="star" id="non_rating_star" size="lg" class="mr-1.5"/>
      </div>  
    </div>
    <div class="mb-4 align-top">
      <div>         
        <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
        <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
        <fa icon="star" id="non_rating_star" size="lg" class="mr-1.5"/>
        <fa icon="star" id="non_rating_star" size="lg" class="mr-1.5"/>
        <fa icon="star" id="non_rating_star" size="lg" class="mr-1.5"/>
      </div>  
    </div>
    <div class="mb-4 align-top">
      <div>         
        <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
        <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
        <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
        <fa icon="star" id="non_rating_star" size="lg" class="mr-1.5"/>
        <fa icon="star" id="non_rating_star" size="lg" class="mr-1.5"/>
      </div>  
    </div>
    <div class="mb-4 align-top">
      <div>         
        <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
        <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
        <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
        <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
        <fa icon="star" id="rating_star" size="lg" class="mr-1.5"/>
      </div>  
    </div>
  </div>
  <div class="hidden sm:block bg-white"></div> <!-- 小屏幕隐藏，sm以上显示占用剩余空间 -->
</div>

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