Tailwind CSS网格如何为最后一列设置异于其他列的justify-items对齐方式

完全可以实现和Excel一致的整列设置对齐效果，不需要给每个单元格单独加样式，核心逻辑是：在grid容器上通过justify-items设置所有列的默认对齐规则，再通过子选择器批量选中目标列的单元格，用justify-self覆盖对应列的对齐规则即可。

常用实现方式 #

• 固定列数场景（最常用）
  直接用Tailwind自带的任意变体写法，不需要额外写自定义CSS，在grid容器类名里就能完成所有配置。
  比如实现3列布局：第一列左对齐、第二列居中、第三列右对齐，代码如下：

  <div class="grid grid-cols-3
    justify-items-start /* 默认所有单元格左对齐 */
    [&>*:nth-child(3n+2)]:justify-self-center /* 第二列覆盖为居中 */
    [&>*:nth-child(3n)]:justify-self-end /* 第三列覆盖为右对齐 */
  ">
    <div>第一行第一列</div>
    <div>第一行第二列</div>
    <div>第一行第三列</div>
    <div>第二行第一列</div>
    <div>第二行第二列</div>
    <div>第二行第三列</div>
  </div>
  

  如果你只需要最后一列和其他列对齐不同，比如其他列全部居中，最后一列右对齐，写法更简单：

  <div class="grid grid-cols-3 justify-items-center [&>*:nth-child(3n)]:justify-self-end">
    <!-- 单元格内容 -->
  </div>
  

  写法里的3n对应每3个元素选中1个，也就是所有行的最后一列元素，列数变化时只需要修改数字即可，比如4列布局就把3n改成4n。

• 自动填充/列数不固定场景
  目前CSS没有原生的grid列选择器，这类场景可以在循环渲染单元格时，通过索引判断是否属于最后一列，给对应单元格加上justify-self-end/justify-self-center类即可，逻辑和Excel选整列设置格式的思路一致。

原理说明 #

• justify-items是grid容器属性，为所有子单元格设置默认的行内轴对齐方式，可选值为start（左对齐）、center（居中）、end（右对齐）
• justify-self是grid子项属性，会覆盖容器设置的默认对齐规则，只对当前子项生效
• Tailwind的方括号任意变体[&>选择器]:类名，可以直接在类名里写自定义选择器选中对应子元素，批量应用样式，不需要单独写CSS文件。

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