如何在CSS grid布局中实现按比例排布的元素堆叠效果

算力阿峰

2026-8-28

CSS Grid 实现方案

直接通过父容器定义网格比例+子项指定网格区域即可实现，不需要嵌套额外容器，代码简洁易维护。

核心实现逻辑

父容器开启grid布局后，列设置为2fr 1fr，天然按2:1分配总宽度，对应左侧2/3、右侧1/3的宽度要求
父容器行设置为2fr 1fr，两行高度比例为2:1
第一个子项跨左侧整列的2行，总高度刚好为2fr；剩余两个子项分别放在右侧列的上下两行，各占1fr高度，刚好满足第一个div高度是其余单个div高度2倍、右侧两个div垂直堆叠占满1/3宽度的要求

完整代码示例

<!-- HTML结构 -->
<div class="grid-wrap">
  <div class="box box1">区块1</div>
  <div class="box box2">区块2</div>
  <div class="box box3">区块3</div>
</div>

/* CSS样式 */
.grid-wrap {
  display: grid;
  /* 列宽2:1分配 */
  grid-template-columns: 2fr 1fr;
  /* 行高2:1分配 */
  grid-template-rows: 2fr 1fr;
  /* 按需设置区块间距，可删除 */
  gap: 10px;
  /* 演示用高度，实际项目可根据需求调整或删除，比例关系不受影响 */
  height: 600px;
}

.box1 {
  /* 占第1列，跨第1-2行 */
  grid-column: 1;
  grid-row: 1 / span 2;
  background: #bbdefb;
}

.box2 {
  /* 占第2列第1行 */
  grid-column: 2;
  grid-row: 1;
  background: #c8e6c9;
}

.box3 {
  /* 占第2列第2行 */
  grid-column: 2;
  grid-row: 2;
  background: #ffecb3;
}