如何让CSS Grid网格容器占满整个页面实现全屏效果？

你当前代码无法铺满全屏的核心原因有两个：

1. 浏览器默认的html、body标签高度为auto，由内容撑开，没有绑定视口高度，子元素.wrapper无法通过百分比拿到全屏高度
2. 你设置的grid-template-columns、grid-template-rows取值为auto，网格尺寸由内容撑开，不会自动分配容器剩余空间

具体修改步骤 #

方案1：百分比继承（适配性更好） #

• 首先重置根标签样式，清除默认边距，绑定全高

/* 新增全局样式 */
html, body {
  margin: 0; /* 清除浏览器默认给body加的8px外边距，避免边缘白边 */
  padding: 0;
  height: 100%;
}

• 修改.wrapper样式，设置全高，用fr单位替换auto实现网格自动撑满

.wrapper {
  display: grid;
  border-style: solid;
  box-sizing: border-box; /* 让边框算在容器宽高内部，避免溢出产生滚动条 */
  width: 100%;
  height: 100%; /* 继承body的全高 */
  /* 把auto换成fr单位，自动分配容器剩余空间 */
  grid-template-columns: repeat(3, 1fr); /* 三列等宽占满容器宽度 */
  grid-template-rows: 2fr 1fr; /* a区域占2份高度，b区域占1份高度，对应你原来的分区规则 */
  grid-template-areas:
    'a a a'
    'b b b';
}

说明：原来的代码写了3行auto，但a区域占据前两行、b占据第三行，本质是上下两个分区，直接按2:1分配高度即可，不需要冗余定义。如果要严格保留3行结构，把grid-template-rows改成repeat(3, 1fr)就行，效果是三行等高。

方案2：视口单位（写法更简洁） #

不需要修改html、body样式，直接给.wrapper设置视口宽高即可：

.wrapper {
  display: grid;
  border-style: solid;
  box-sizing: border-box;
  width: 100vw; /* 视口宽度的100% */
  height: 100vh; /* 视口高度的100% */
  margin: 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 2fr 1fr;
  grid-template-areas:
    'a a a'
    'b b b';
}

两种方案差异：

• 百分比继承方案适合容器在正常文档流中、后续需要跟随父容器尺寸适配的场景，兼容性更好
• 视口单位方案直接绑定屏幕视口尺寸，写法简单，但部分移动端浏览器中100vh会被顶部/底部工具栏遮挡，需要做兼容处理

你的.first和.second原有样式不需要修改，调整完上述属性后网格就会自动铺满整个屏幕。

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