Grid布局中元素数与列数奇偶性不同时，如何居中最后一行？

核心问题分析 #

你遇到的问题本质是：小屏幕2列Grid布局下，奇数个元素的最后一个默认靠左，使用col-span-full会让圆形因继承整行宽度而变大——需要保持圆形原有尺寸的同时，让它在最后一行水平居中。

解决方案1：手动给最后一个元素加类（适合固定数量列表） #

直接给最后一个圆形添加小屏幕专属样式，让它跨满列但维持原有宽度，再居中：

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
.circle {
  @apply w-full aspect-square rounded-full bg-blue-600 lg:col-span-1;
}
</style>

<body class="p-4">
  <div class="border-[1px] border-red flex justify-center items-center">
    <div class="grid grid-cols-2 w-full lg:grid-cols-5 gap-4">
      <div class="circle"></div> 
      <div class="circle"></div>        
      <div class="circle"></div> 
      <div class="circle"></div> 
      <!-- 小屏幕下居中且保持尺寸的类 -->
      <div class="circle lg:col-span-1 col-span-full w-[calc(50%-0.5rem)] mx-auto"></div>
    </div>
  </div>
</body>

• col-span-full：让元素占据整行布局空间
• w-[calc(50%-0.5rem)]：匹配其他圆形的宽度（gap-4为1rem，每列宽度为(100%-1rem)/2）
• mx-auto：实现整行水平居中

解决方案2：CSS自动处理（适合动态数量列表） #

如果列表元素数量不固定，用CSS选择器自动匹配奇数个元素的最后一项：

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
.circle {
  @apply w-full aspect-square rounded-full bg-blue-600 lg:col-span-1;
}

/* 匹配小屏幕下、总数为奇数的列表最后一项 */
@media (max-width: 1023px) {
  .grid > .circle:last-child:nth-child(odd) {
    grid-column: 1 / -1; /* 跨满所有列 */
    width: calc(50% - 0.5rem); /* 维持原有列宽 */
    margin: 0 auto; /* 水平居中 */
  }
}
</style>

<body class="p-4">
  <div class="border-[1px] border-red flex justify-center items-center">
    <div class="grid grid-cols-2 w-full lg:grid-cols-5 gap-4">
      <div class="circle"></div> 
      <div class="circle"></div>        
      <div class="circle"></div> 
      <div class="circle"></div> 
      <div class="circle"></div>
    </div>
  </div>
</body>

• @media (max-width: 1023px)：对应Tailwind的lg断点（1024px以上为5列布局）
• :last-child:nth-child(odd)：精准匹配总数为奇数的列表最后一个元素
• 无需手动修改HTML，动态列表也能自动生效

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