如何让CSS Grid 8×4布局的行实现全屏高度响应？

嘿，这个问题其实挺常见的——咱们先捋明白为啥行没法撑满全屏高度：默认情况下，CSS Grid容器的高度是由内部内容撑开的，不像宽度默认是块级元素自动占满父容器宽度。所以要让行实现全屏高度响应，得先让Grid容器本身占满整个视口高度，再让行去平分这个高度。

具体解决方案步骤： #

• 第一步：先让Grid容器的父级（一般是html和body）占满视口高度，不然容器没足够的空间去拉伸
• 第二步：给Grid容器设置高度为100%或者直接用min-height: 100vh（vh是视口高度单位，1vh等于视口高度的1%）
• 第三步：确保你的行模板用repeat(4, 1fr)，这样4行就会平分容器的高度

修改后的代码示例： #

HTML（假设你的基础结构是这样）：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <!-- 剩余30个网格项（8列×4行=32个）此处省略 -->
</div>

CSS：

/* 先让html和body占满视口高度，去掉默认边距避免滚动条 */
html, body {
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* 让所有元素继承border-box，避免padding/margin撑大容器 */
*, *::before, *::after {
  box-sizing: inherit;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* 你的8列响应设置没问题 */
  grid-template-rows: repeat(4, 1fr); /* 4行平分容器高度 */
  height: 100%; /* 让容器占满父级（body）的高度 */
  /* 也可以用min-height: 100vh; 这样即使内容超过视口，容器也会自适应高度 */
}

.grid-item {
  border: 1px solid #ccc; /* 加边框方便直观查看网格布局 */
}

额外小提示： #

如果用height: 100%，要确保从html到body再到Grid容器的所有父元素都设置了高度，不然可能不生效；而min-height: 100vh更省心，直接基于视口高度计算，不用管父级的高度设置。

另外，如果Grid容器有padding或margin，一定要配合box-sizing: border-box使用，不然会导致容器总高度超过视口，出现不必要的滚动条。

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