CSS Grid实现两列布局且子项为父项半高的问题求助

你的问题在于手动给子项设置固定高度，同时未明确父容器高度并让Grid控制行高比例。以下是修正后的代码：

基础修正方案（三行两列布局） #

CSS #

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  height: 600px; /* 父容器固定高度，可按需调整 */
  grid-template-rows: 1fr 1fr 1fr; /* 三行等高，每行占父容器1/3高度 */
  grid-template-areas:
    'header header'
    'menu right'
    'main footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  /* 确保内容垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML #

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 上述CSS代码放在这里 */
  </style>
</head>
<body>

<h1>Grid Layout</h1>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

</body>
</html>

关键调整说明 #

1. 移除子项固定高度：删除.item2到.item5的height属性，让Grid自动控制单元格高度。
2. 设置父容器高度：给.grid-container添加固定高度（如600px），确保子项高度能基于父容器计算。
3. 用grid-template-rows定义行高比例：1fr 1fr 1fr表示三行高度均等，每个子项高度为父容器的1/3。如果想让下方四个子项高度接近父容器的一半，可将行高比例改为1fr 2fr 2fr，此时Header占父容器1/5高度，下方每行占2/5高度。

嵌套Grid方案（左/右列子项各占父容器一半高度） #

如果你的需求是Header占父容器一半高度，左列Menu+Main、右列Right+Footer各占父容器一半高度，可采用嵌套Grid：

CSS #

.grid-container {
  display: grid;
  height: 600px;
  grid-template-rows: 1fr 1fr; /* 两行，每行占父容器一半高度 */
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    'header header'
    'menu right';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.item1 { grid-area: header; }
.item2, .item4 {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

.grid-container > div,
.item2 > div, .item4 > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML #

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 上述CSS代码放在这里 */
  </style>
</head>
<body>

<h1>Grid Layout</h1>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">
    <div>Menu</div>
    <div>Main</div>
  </div>
  <div class="item4">
    <div>Right</div>
    <div>Footer</div>
  </div>
</div>

</body>
</html>

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