CSS Grid布局子网格高度异常缩小问题求助

问题 #

使用CSS Grid布局构建网站时，子网格（.grids）高度不符合预期：#grid1能保持设置的25%高度，但#grid4仅占约10%。

HTML结构 #

<div id="gridcontainer">
  <div id="grid1" class="grids">
    <div class="element1"></div>
    <div class="element2"></div>
  </div>
  <div id="grid2" class="grids">
    <div class="element1"></div>
    <div class="element2"></div>
  </div>
  <div id="grid3" class="grids">
    <div class="element1"></div>
    <div class="element2"></div>
  </div>
  <div id="grid4" class="grids">
    <div class="element1"></div>
    <div class="element2"></div>
  </div>
</div>

CSS代码 #

#gridcontainer {
  display: grid;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: 100%;
  height: 100%;
}

.grids {
  position: absolute;
  display: grid;
  grid-column: 1;
  grid-template-rows: 50% 50%;
  grid-template-columns: 100%;
  height: 100%;
}

.element1 {
  grid-column: 1;
  grid-row: 1;
  height: 100%;
}

.element2 {
  grid-column: 1;
  grid-row: 2;
  height: 100%;
}

#grid1 {
  grid-row: 1;
}

#grid2 {
  grid-row: 2;
}

/* ... */

解决方案 #

问题出在.grids的position: absolute属性——绝对定位元素会脱离Grid布局的文档流，导致父容器#gridcontainer无法正确计算行高，最终子网格高度失控。

修复步骤 #

1. 移除绝对定位：删掉.grids中的position: absolute，让子网格回到Grid布局的正常流中，此时.grids会自动继承父网格行的25%高度。
2. 确保父容器高度生效：如果#gridcontainer的height: 100%不生效，说明它的父元素（如<html>、<body>）没有设置高度，可以改为用height: 100vh让容器占满整个视口高度。

修改后的核心CSS：

#gridcontainer {
  display: grid;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: 100%;
  height: 100vh; /* 占满视口高度，替代依赖父元素的百分比 */
}

.grids {
  /* 移除position: absolute */
  display: grid;
  grid-template-rows: 50% 50%;
  grid-template-columns: 100%;
  height: 100%; /* 继承父网格行的高度 */
}

备选方案（不推荐） #

如果必须使用绝对定位，需要给每个子网格手动设置位置和高度：

#grid1 { top: 0; height: 25%; }
#grid2 { top: 25%; height: 25%; }
#grid3 { top: 50%; height: 25%; }
#grid4 { top: 75%; height: 25%; }

但这种方式完全放弃了Grid布局的自动排版优势，仅在特殊场景下使用。

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