React+TailwindCSS项目：CSS Grid下居中多余Div并统一卡片高度

1. 统一所有卡片高度 #

要让所有卡片（无论是否在同一行）高度匹配最高卡片，结合Grid布局特性，给Grid容器设置grid-auto-rows: 1fr，同时让卡片容器和卡片组件本身占满高度即可：

修改后的JSX代码：

<div className="container">
   <div className="grid grid-cols-4 gap-x-2 gap-y-4" style={{ gridAutoRows: '1fr' }}>
       {valueCards.map(
          (item, index) => (
             <div key={index} className="h-full">
                 <ValuesCard 
                     description={item.description} 
                     isPrimary={index % 2 === 0} 
                     className="h-full" 
                 />
             </div> 
          )
        )}
    </div>
</div>

• gridAutoRows: '1fr'：强制Grid所有行高度相等，自动匹配最高行的高度。
• h-full：让卡片容器和ValuesCard组件完全填充所在Grid单元格的高度，确保所有卡片高度统一。

2. 让最后一行卡片居中显示 #

解决最后一行卡片左对齐的问题，给Grid容器添加Tailwind的justify-content-center类即可：

<div className="container">
   <div className="grid grid-cols-4 gap-x-2 gap-y-4 justify-content-center" style={{ gridAutoRows: '1fr' }}>
       {valueCards.map(
          (item, index) => (
             <div key={index} className="h-full">
                 <ValuesCard 
                     description={item.description} 
                     isPrimary={index % 2 === 0} 
                     className="h-full" 
                 />
             </div> 
          )
        )}
    </div>
</div>

justify-content-center会让Grid的列在容器内居中排列，当最后一行不足4个卡片时，自然呈现居中效果。

替代方案：用Flex布局实现 #

如果你更倾向于Flex布局，也能达到同样效果：

<div className="container">
   <div className="flex flex-wrap justify-center gap-x-2 gap-y-4">
       {valueCards.map(
          (item, index) => (
             <div key={index} className="w-[calc(25%-0.375rem)]">
                 <ValuesCard 
                     description={item.description} 
                     isPrimary={index % 2 === 0} 
                     className="h-full" 
                 />
             </div> 
          )
        )}
    </div>
</div>

• flex flex-wrap justify-center：启用Flex换行并让每行元素居中。
• w-[calc(25%-0.375rem)]：计算4列布局下的卡片宽度，减去gap的分摊值，避免卡片超出容器宽度。
• Flex默认的align-items: stretch会让所有卡片容器高度自动匹配最高项，配合h-full即可实现卡片高度统一。

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