如何让Grid布局中contentBody填充contentSide设为50%后的空白区域？

我用Grid实现了一个3列2行的布局，将contentSide元素宽度设置为50%后，希望contentBody能填充它旁边的空白区域。当前的CSS和HTML代码如下：

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.gridContainer {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  gap: 5px;
  margin: .75rem;
}

.contentHead {
  grid-column: 1 / 4;
  background-color: green;
  height: 5rem;
}

.contentSide {
  grid-column: 1 / 1;
  grid-row: 2 / 3;
  background-color: red;
  width: 50%;
}

.contentBody {
  grid-column: 2 / 4;
  background-color: yellow;
}

HTML代码 #

<div class="gridContainer">
  <div class="contentHead">
    <h1>HEADER</h1>
  </div>
  <div class="contentSide">
    <h1>NAVIGATION</h1>
  </div>
  <div class="contentBody">
    <h1>CONTENT</h1>
  </div>
</div>

目前设置grid-template-rows: auto没有达到预期效果，请问如何用Grid实现让contentBody填充这片空白？

核心问题在于：给contentSide设置width:50%仅缩小了元素本身，但第一列的网格轨道宽度仍为auto，空白区域属于第一列轨道范围，而contentBody默认只占据第二、三列，因此无法覆盖该空白。以下是两种可行的解决思路：

思路1：拆分网格轨道，通过轨道划分实现布局 #

将原第一列拆分为两个等宽子轨道，让contentSide占据第一个子轨道，contentBody从第二个子轨道开始跨至最后一列，完全贴合需求：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.gridContainer {
  display: grid;
  /* 把第一列拆分为两个1fr轨道，总列数变为4 */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(2, auto);
  gap: 5px;
  margin: .75rem;
}

.contentHead {
  grid-column: 1 / 5; /* 跨全部4列 */
  background-color: green;
  height: 5rem;
}

.contentSide {
  grid-column: 1 / 2; /* 占据拆分后的第一个子轨道 */
  grid-row: 2 / 3;
  background-color: red;
}

.contentBody {
  grid-column: 2 / 5; /* 从第一个子轨道的末尾开始，跨至最后一列 */
  background-color: yellow;
}

这种方式无需手动设置元素宽度，完全遵循Grid的轨道布局逻辑，更易维护。

思路2：利用Grid重叠特性，让contentBody覆盖整个第二行 #

保持原有3列布局，让contentBody跨整个第二行，再通过z-index确保contentSide显示在上方：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.gridContainer {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  gap: 5px;
  margin: .75rem;
}

.contentHead {
  grid-column: 1 / 4;
  background-color: green;
  height: 5rem;
}

.contentSide {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background-color: red;
  width: 50%;
  z-index: 1; /* 确保导航栏显示在内容上方 */
}

.contentBody {
  grid-column: 1 / 4; /* 跨全部3列 */
  grid-row: 2 / 3;
  background-color: yellow;
}

这种方式通过元素重叠实现视觉上的填充效果，适合需要保留原轨道划分的场景。

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