如何为CSS Grid合并行的网格区域指定高度？

架构老林

2026-6-22

CSS Grid 指定跨区域高度并保持布局完整的解决办法

问题说明

需要实现如下网格布局：

A B C
A D E
F G E

要求：

区域A总高度为96px
区域E总高度为48px
其余区域高度随内容自动调整

直接为跨多行的网格项设置height会导致布局错位，因为网格项的高度应由其跨越的行的总高度决定，强制设置高度会破坏网格的自动布局计算。

解决方案：嵌套内部容器控制高度

通过在跨区域的网格项内部嵌套容器，让网格项自动占据整个网格单元格空间，内部容器设置指定高度，既满足高度要求，又不破坏布局。

修改后的代码

HTML

<div class="table">
  <div class="a">
    <div class="a-inner">a</div>
  </div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">
    <div class="e-inner">e</div>
  </div>
  <div class="f">f</div>
  <div class="g">g</div>
</div>

CSS

.table {
  display: grid;
  grid-template-columns: 96px 1fr 48px;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "a b c"
    "a d e"
    "f g e";
  gap: 5px;
}

.table > div {
  border: 1px solid black;
  /* 让网格项占满单元格空间，方便内部容器对齐 */
  display: flex;
  align-items: center;
  padding: 8px;
}

.a {
  grid-area: a;
}

.a-inner {
  height: 96px;
  width: 100%;
  /* 可选：添加背景色区分区域 */
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  padding: 8px;
}

.e {
  grid-area: e;
}

.e-inner {
  height: 48px;
  width: 100%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  padding: 8px;
}