求助：如何实现目标HTML/CSS Grid布局？当前效果不符

我明白你想要的布局效果——左边两个元素上下排列，右边一个元素占据左侧两个元素的总高度，对吧？你现在用绝对定位的方式之所以没成功，是因为绝对定位会让元素脱离正常的文档流：你的.1和.2都设置了left:0，所以它们会直接叠在左上角，.3在右上角，自然就出现了你看到的重叠问题。

咱们换用CSS Grid来实现，这才是做这种二维布局的正确姿势，代码简单又可靠：

首先是HTML结构（你可以根据实际内容调整）：

<div class="grid-container">
  <div class="item-1">内容区块1</div>
  <div class="item-2">内容区块2</div>
  <div class="item-3">内容区块3</div>
</div>

然后是核心的CSS代码：

.grid-container {
  display: grid;
  /* 把容器分成两列，各占50%宽度 */
  grid-template-columns: 50% 50%;
  /* 两行高度由内容自动撑开 */
  grid-template-rows: auto auto;
  /* 可选：给区块之间加一点间距，避免挤在一起 */
  gap: 10px;
  /* 让容器占满父元素宽度 */
  width: 100%;
}

.item-1 {
  /* 占据第一列的第一行 */
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  padding: 10px;
}

.item-2 {
  /* 占据第一列的第二行 */
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  padding: 10px;
}

.item-3 {
  /* 占据第二列的两行（从第一行到第三行，包含两行） */
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  padding: 10px;
}

如果觉得上面的grid-column和grid-row写法有点绕，还可以用更直观的grid-area命名方式：

.grid-container {
  display: grid;
  /* 直接画出布局结构 */
  grid-template-areas: 
    "left-top right-area"
    "left-bottom right-area";
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto;
  gap: 10px;
  width: 100%;
}

.item-1 {
  grid-area: left-top;
  padding: 10px;
}

.item-2 {
  grid-area: left-bottom;
  padding: 10px;
}

.item-3 {
  grid-area: right-area;
  padding: 10px;
}

这样写出来的布局，左边两个元素会乖乖上下排列，右边的元素会自动占满左侧两个元素的总高度，完全符合你想要的效果！

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