React+Tailwind：中等屏幕下Grid中剩余2个卡片居中方案

方法一：调整Grid列布局与对齐方式 #

修改父容器的Tailwind类，在中等屏幕下将列设置为自适应宽度并让网格整体居中，大屏下恢复原布局：

<div className="grid grid-cols-1 md:grid-cols-[repeat(3,auto)] md:justify-center xl:grid-cols-5 xl:justify-start">
  {data.map((item) => (
    <Card key={item.id} widget={item} />
  ))}
</div>

• md:grid-cols-[repeat(3,auto)]：让md尺寸下的3列宽度由卡片内容决定，而非强制均分容器宽度
• md:justify-center：让整个网格在容器内水平居中，第二行的2个卡片会自然居中显示
• xl:justify-start：在大屏尺寸下恢复左对齐，保持5列均分的布局

方法二：通过条件类控制最后两个卡片的位置 #

如果需要保持md下3列均分的布局（每个卡片占1/3宽度），可以通过判断卡片索引，给最后两个卡片添加跨列类实现居中：

<div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-5">
  {data.map((item, index) => (
    <Card 
      key={item.id} 
      widget={item} 
      className={`${index >= 3 && 'md:col-start-2 md:col-end-4'}`}
    />
  ))}
</div>

• md:col-start-2 md:col-end-4：让第4、5个卡片（索引3、4）在md尺寸下跨第2到第3列，实现居中效果

注意：这种方法需要确保Card组件接受并传递className属性到根元素

代码小修正 #

你当前的代码存在变量错误：map循环的是item，但key和widget属性用的是widget，应改为item，否则会引发未定义错误。

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