CSS grid网格布局出现多余空白问题该如何排查解决

问题原因 #

• .individual-topics 规则中配置了 padding-right: 50%，该属性以元素自身宽度为基准计算，直接占用了容器右半部分空间，是横向多余空白的核心诱因。
• .topics 设置了 min-width: 500px，配合 .homepage 两列等宽、总最大宽度1000px的网格配置，左侧列被强制占满500px，内容宽度不足时就会出现空白。
• .individual-topics 同时配置了 line-height: 3 和上下各1.5rem的内边距，过度撑高了容器高度；叠加 .homepage 的 min-height: 280px 与 align-content: center 配置，内容高度不足时会自动生成上下填充空白。
• .homepage-recent-title 设置了 width: 50% 与 margin: auto，仅占用右侧列一半宽度且水平居中，会导致右侧区域左右两侧出现空白。

修复方案 #

调整对应CSS规则即可，HTML结构无需改动，如果你使用CSS预处理器保留嵌套写法也可以直接修改对应属性：

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-content {
  flex-grow: 1;
  padding: 6rem 0;
}

.homepage {
  margin: auto;
  max-width: 1000px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 3rem;
  /* 可按需调整两列间距 */
  gap: 2rem;
}
.topics {
  justify-self: stretch;
}
.homepage-recent-title {
  font-size: 3rem;
  position: relative;
  overflow: hidden;
  line-height: 1;
}
.homepage-topics-title {
  font-size: 3rem;
  position: relative;
  align-self: center;
  overflow: hidden;
  margin-left: 3rem;
  line-height: 1;
}
.individual-topics {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 5rem;
  font-size: 1.6rem;
  font-weight: 400;
  align-items: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 可根据视觉需求调整行高数值 */
  line-height: 1.8;
}

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