Tailwind实现未知数量元素的自适应3列网格布局

不需要后端计算余数，纯Tailwind就能搞定，核心思路是利用CSS伪类结合Tailwind的变体控制末行元素位置：

1. 父容器设置响应式网格：

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <!-- 元素列表 -->
  <div class="item">元素1</div>
  <div class="item">元素2</div>
  <div class="item">元素3</div>
  <div class="item">元素4</div>
  <div class="item">元素5</div>
  <div class="item">元素6</div>
  <div class="item">元素7</div>
  <!-- 可增加第8个元素测试 -->
</div>

2. 给每个子元素添加以下Tailwind类，实现末行居中：

<div class="md:nth-last-child(1):col-span-1 md:nth-last-child(1):col-start-2 md:nth-last-child(2):col-start-1 md:nth-last-child(2):ml-auto md:nth-last-child(1):col-start-2 md:nth-last-child(1):mr-auto">

效果说明 #

• 小宽度（md断点以下）：自动垂直排列，满足需求。
• 大宽度（md断点及以上）：
  • 元素总数为3的倍数时：正常3列分布，每行3个元素。
  • 元素总数为3n+1（比如7个）：最后1个元素自动移到第三行中间列，实现居中。
  • 元素总数为3n+2（比如8个）：最后两个元素整体在网格下方居中分布，对应你要求的“第7个在第4、5个下方居中，第8个在第5、6个下方居中”的效果。

补充 #

如果需要固定元素宽度，可给子元素添加w-full或w-64这类宽度类，保证布局稳定。

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