使用CSS Grid布局时页面底部出现大量空白该如何排查？

问题根源 #

底部大面积空白是.grid-container的grid-template-rows参数配置错误导致的：
当前配置为grid-template-rows: 1fr 1fr 1fr 1fr，含义是将grid容器的总高度平均分为4份，每一行占1份。你的4个网格子元素内容量极少，远撑不满分配的行高，每行的剩余空间累加后就形成了大面积底部空白。

解决方法 #

根据布局需求二选一即可：

• 需求：页面高度随内容自适应，无多余空白
  将.grid-container的grid-template-rows修改为：

  grid-template-rows: auto auto auto auto;
  

  该配置会让每行高度根据自身内容自动调整，不会额外分配空白空间。
• 需求：页面始终占满整个视口高度，footer固定在视口底部
  先给html、body、grid容器统一设置占满高度：

  html, body, .grid-container {
    height: 100%;
  }
  

  再修改.grid-container的grid-template-rows，把中间内容区域分配剩余空间：

  /* 行高依次为：导航自动高度、intro占剩余空间、projects占剩余空间、footer自动高度 */
  grid-template-rows: auto 1fr 1fr auto;
  

优化建议 #

当前未给导航ul指定网格位置，默认会放在第一行第一列，建议显式添加配置避免后续新增元素时布局紊乱：

ul {
  grid-column: 1 / span 4;
  grid-row: 1;
}

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