如何在CSS Grid列中实现卡片元素根据行内数量自动居中？

开发者阿泽

2026-9-27

问题原因

你当前的写法有三个核心问题：

auto-fill参数会在容器宽度足够时生成空的列轨道占位，就算实际卡片数量不足一行，空列也会占住宽度，导致卡片没法居中
没有做最多5列的限制，窗口足够宽的时候会出现每行超过5张卡片的情况
grid-template-columns设置的1fr会让列自动撑满可用空间，和你写的justify-content居中配置冲突，无法生效

修复方案

直接替换.card-wrapper的样式即可，原有.card的样式不需要修改：

.card-wrapper {
    display: grid;
    /* auto-fit代替auto-fill，自动折叠空列；限制每列最小240px，最大为容器1/5宽度，保证最多5列 */
    grid-template-columns: repeat(auto-fit, minmax(max(240px, 100%/5 - 10px), 1fr));
    grid-gap: 10px;
    align-items: center;
    /* 让每个卡片在自身列区域内居中 */
    justify-items: center;
    /* 卡片总宽度小于容器宽度时，整行内容整体居中 */
    justify-content: center;
    /* 可选：给wrapper加最大宽度，避免超宽屏卡片太分散，数值可根据自己的需求调整 */
    max-width: 1300px;
    margin: 0 auto;
}