如何居中Grid布局中的最后两个元素？

问题原因 #

你当前用repeat(auto-fill, 350px)定义网格列，这种方式会生成固定宽度的列。当最后一行元素数量少于每行最大可容纳列数时，元素会占据左侧列位，剩余列位空出，导致最后一行元素视觉上未居中。

方案一：伪元素填充剩余列位 #

通过添加伪元素填补最后一行的空列位，配合justify-content: center实现整体居中：

.grid { 
    height: auto;
    margin: 50px 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, 350px);
    justify-content: center;
    gap: 20px;
}

.grid-item {
    width: 350px;
    height: 200px;
    background: #333;
}

/* 填充剩余列位的伪元素 */
.grid::after {
    content: "";
    width: 350px;
    height: 0; /* 不占用垂直空间 */
    visibility: hidden; /* 隐藏伪元素 */
}

如果每行最多可容纳4个元素，可添加多个伪元素（比如额外的:before选择器），上述代码针对“每行3个元素、最后一行2个”的常见场景足够生效。

方案二：自适应列宽+元素居中 #

改用auto-fit和minmax定义网格列，让单元格自适应宽度，再让元素在单元格内居中：

.grid { 
    height: auto;
    margin: 50px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.grid-item {
    width: 350px;
    height: 200px;
    background: #333;
    margin: 0 auto; /* 元素在单元格内水平居中 */
}

这种方式更灵活，无论容器宽度如何变化，最后一行元素都会自动保持居中，无需额外处理空列位。

示例HTML（无需修改） #

<div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>  
</div>

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