使用CSS Grid无法正确展示应用布局，请求排查问题

常见遗漏点及解决方法 #

• 未明确网格轨道大小，依赖默认auto值导致多余空间
  默认情况下，grid-template-columns/grid-template-rows若未指定或设为auto，浏览器会根据内容自动分配空间，当内容不足以填满容器时，就会出现大量空白。建议用fr单位分配剩余空间，同时通过gap控制组件间合理间距：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 平均分配3列空间 */
  gap: 16px; /* 统一组件间的间距，避免无意义空白 */
}

• 未设置容器的明确尺寸
  如果Grid容器没有指定高度或宽度（比如height: 100%、width: 100%或固定值），容器会被内容撑开，若子组件尺寸不一致，极易出现纵向或横向空白。可根据需求给容器设置合适尺寸：

.grid-container {
  display: grid;
  height: 100vh; /* 让容器占满整个视口高度 */
  grid-template-rows: auto 1fr auto; /* 按内容占比分配行高 */
}

• 误用自动轨道配置
  若开启了自动创建轨道（grid-auto-rows/grid-auto-columns）且设为auto，当内容较少时会生成多余空白轨道。可设置自动轨道的最小/最大尺寸：

.grid-container {
  grid-auto-rows: minmax(100px, auto); /* 自动行高最小100px，最大自适应内容 */
}

• 未清除浏览器默认样式
  浏览器会给body等元素默认添加边距，可能导致容器周围或内部出现空白。可全局清除默认样式：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• 子元素自带空白（如图片）
  即使子组件无独立CSS，像图片这类元素可能自带基线空白（底部留白），可通过设置display属性解决：

.grid-item img {
  display: block;
  width: 100%;
}

排查步骤 #

1. 先给Grid容器配置明确的grid-template-columns/grid-template-rows，用fr单位分配空间；
2. 检查容器的尺寸设置，确保容器大小符合预期；
3. 用浏览器开发者工具（F12）查看元素盒模型，定位空白的具体来源。

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