网格布局下方出现未知空白，如何去除该空白区域？

• 先给全局元素重置默认边距与内边距，很多时候是子元素（如<p>、<h1>这类标签）自带的margin导致容器下方多出空白：

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

• 检查Grid容器的父级（比如<html>标签），部分浏览器默认会给<html>设置margin，直接覆盖：

  html {
    margin: 0;
    padding: 0;
  }
  

• 给Grid容器设置height: fit-content;，强制容器高度贴合内部Grid的总高度（400px+400px+100px=900px），避免浏览器自动拉伸容器产生空白：

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 400px 400px 100px;
    height: fit-content;
  }
  

如果以上操作后仍有空白，建议用浏览器开发者工具（F12）的元素选择器定位空白区域，查看是否有隐性元素（如伪元素）占用空间。

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