动态网格右侧空白去除咨询：自适应列宽与居中问题

你的问题出在grid-template-columns使用了固定宽度的auto-fill逻辑，当容器宽度无法被设定的列宽整除时，就会在右侧留下空白。下面提供两种针对性的解决思路：

方案一：让列自适应填充空白（推荐） #

把固定列宽改为minmax配合auto-fit，同时用gap单独设置列/行间距（代替你原来算在列宽里的30px），剩余空间会被列自动拉伸，填满整个容器：

.card-grid {
    display: grid;
    /* 最小列宽235px，剩余空间自动分配给各列 */
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    /* 单独设置列、行间距 */
    gap: 30px;
    width: 100%;
    height: 100%;
    place-items: center;
    grid-auto-rows: 325px; /* 行高无需包含间距，gap会自动处理 */
}

修改后，列会根据容器宽度自动调整数量，且每列会拉伸填充剩余空间，彻底消除右侧空白。

方案二：保持固定列宽，让网格居中 #

如果想保留235px的固定列宽，仅消除右侧单边空白，可以给网格添加justify-content: center，让空白均匀分布在容器左右两侧：

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 235px);
    gap: 30px; /* 单独设置间距，避免列宽包含间距导致计算误差 */
    width: 100%;
    height: 100%;
    place-items: center;
    /* 让网格在容器内水平居中 */
    justify-content: center;
    grid-auto-rows: 325px;
}

关于width: auto时仅显示单列的问题 #

当设置width: auto时，容器宽度由内容撑开，auto-fill只会生成能容纳的最少列数（即1列）。解决这个问题的前提是给容器明确的宽度约束（比如width: 100%），或者采用方案一的自适应列宽逻辑。

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