WordPress分类页CSS Grid布局末尾空位无法填充问题求助

核心问题原因 #

你遇到的空位问题由三处CSS错误/不合理配置导致：

1. 语法错误：grid-template-rows属性行末尾缺少分号，导致后续justify-content属性失效
2. 列轨道配置错误：你原本计划使用auto-fit实现响应式，但实际代码写的是auto-fill：
   • auto-fill会在容器宽度足够时保留空的列轨道，即使没有内容填充也会占位
   • auto-fit会折叠空轨道，让已有内容自动占满容器宽度
3. 冗余属性冲突：justify-content: space-between和1fr的列宽分配逻辑冲突，会导致列对齐异常

修复代码 #

将你的Grid CSS替换为以下内容即可：

.category main .article-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px; /* 可根据设计需求调整行列间距 */
}

可选优化（进一步避免空位） #

如果修改CSS后仍偶有空位，可以调整WordPress分页配置：
进入后台→设置→阅读，修改「博客页面至多显示」的数值，选择和你站点主流访问设备列数（比如桌面端4列、平板端3列）可整除的数值（如12、9等），即可最大化利用页面空间。

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