响应式Grid布局问题：网格项间空白异常且随页面高度变大

算力阿峰

2026-7-18

问题分析与解决方案

核心问题

你定义的grid-template-rows仅设置了4行（0.1fr 0.1fr 0.4fr 1fr），但grid-template-areas里却包含8个区域（nav、main、project1至project6）。Grid会自动将后续的project3到project6塞进剩余行空间，其中占比1fr的行会被无限拉伸，这就是project2与project3之间出现巨大空白，且页面高度越高空白越大的原因。

修复方案

方案1：让每行高度自适应内容

调整grid-template-rows，让行数与grid-template-areas的区域数量匹配，且每行高度由内容决定：

@media only screen and (max-width: 900px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, auto); /* 生成8个高度自适应的行，对应8个区域 */
    grid-template-areas:
        "nav"
        "main"
        "project1"
        "project2"
        "project3"
        "project4"
        "project5"
        "project6";
  }
}

方案2：省略手动行数设置（更简洁）

如果不需要给特定行设置比例，直接删除grid-template-rows，Grid会自动根据grid-template-areas生成对应行数，每行高度默认适配内容：

@media only screen and (max-width: 900px) {
  .container {
    grid-template-columns: 1fr;
    align-items: start; /* 可选，避免stretch导致元素被强制拉伸 */
    grid-template-areas:
        "nav"
        "main"
        "project1"
        "project2"
        "project3"
        "project4"
        "project5"
        "project6";
  }
}