求助创建特定固定CSS Grid布局：两列多区域行高适配问题

没问题，我来帮你搞定这个CSS Grid布局！根据你描述的需求和布局图，我们完全可以用显式网格精准控制每个区域的位置和尺寸，根本不需要依赖隐式网格～下面是具体的实现方案：

第一步：先理清布局结构 #

结合你的需求和布局图，六个区域的位置逻辑是：

• 区域1：占据左列（75%宽度）第一行
• 区域2：占据右列（25%宽度）第一行
• 区域3：占据左列第二行
• 区域4：占据左列第三行
• 区域5：占据右列第三行
• 区域6：横跨左右两列第四行

第二步：完整代码实现 #

首先我把你原有的HTML类名改成了更规范的命名（数字开头的类名在CSS里需要特殊处理，建议避免），然后写出对应的CSS：

HTML代码 #

<div id="page-wrapper">
  <div class="grid-container">
    <div class="area-1">区域1</div>
    <div class="area-2">区域2</div>
    <div class="area-3">区域3</div>
    <div class="area-4">区域4</div>
    <div class="area-5">区域5</div>
    <div class="area-6">区域6</div>
  </div>
</div>

CSS代码 #

/* 处理页面左右外侧40px间距 */
#page-wrapper {
  margin: 0 40px;
}

/* 核心网格容器设置 */
.grid-container {
  width: 1100px; /* 固定容器宽度 */
  display: grid;
  grid-template-columns: 75% 25%; /* 两列比例 */
  grid-template-rows: 150px 300px 300px 100px; /* 四行固定高度，可按需调整 */
  grid-gap: 20px; /* 内部区域间的20px间距 */
}

/* 逐个定位网格区域 */
.area-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.area-2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.area-3 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.area-4 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.area-5 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.area-6 {
  grid-column: 1 / 3; /* 横跨左右两列 */
  grid-row: 4 / 5;
}

/* 可选：添加样式方便查看布局效果 */
.grid-container > div {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

关键细节解释 #

1. 显式网格的优势：通过grid-template-columns和grid-template-rows直接定义列宽和行高，完全不需要隐式网格，布局的可控性拉满，这也是你之前尝试显式定义没成功时可能忽略的核心——要明确指定所有行的高度。
2. 区域定位逻辑：grid-column: 1 / 2表示从第1根网格线到第2根网格线，也就是占据1列；grid-row同理控制行的范围，这样每个区域的位置就精准固定了。
3. 间距处理：grid-gap统一管理内部区域的间距，#page-wrapper的margin负责左右外侧的40px间距，完全匹配你的需求。
4. 行高调整：如果需要修改某一行的高度，直接修改grid-template-rows里对应的数值即可，比如把第二行改成250px，非常灵活。

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