如何用CSS Grid避免单列高度增加时其他列被拉伸？

你的问题根源在于当前的网格布局把「One」跨了三行，而「Two」「Three」「Four」分别占据这三行的第二列——每一行的高度会被「One」的高度均分（或自适应），导致右侧每个网格项被强制拉伸填满整行高度。要让右侧三个元素整体居中且不被拉伸，最简洁的方案是调整布局结构，把右侧元素打包进一个容器，再利用Grid和Flex的组合实现需求。

方案一：重构布局（推荐） #

把右侧三个元素放入一个容器，让这个容器作为网格的单个项，然后在容器内部用Flex布局垂直排列元素，同时通过Grid的align-items: center让容器和「One」垂直居中对齐。

修改后的代码 #

HTML

<div class="my-grid">
  <div class="card one">One</div>
  <div class="right-container">
    <div class="card two">Two</div>
    <div class="card three">Three</div>
    <div class="card four">Four</div>
  </div>
</div>

CSS

.my-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: "one right"; /* 简化网格区域，只分左右两部分 */
  gap: 15px;
  align-items: center; /* 让左右两个网格项垂直居中 */
}

.one {
  grid-area: one;
  height: 500px; /* 可以任意调整高度测试效果 */
}

.right-container {
  grid-area: right;
  display: flex;
  flex-direction: column;
  gap: 15px; /* 和主网格的间距保持一致，保证视觉统一 */
}

/* 原有美化样式保留 */
body { background-color: #e9e9e9; margin: 0; padding: 20px; }
.card { background-color: white; padding: 10px; display: flex; justify-content: center; align-items: center; font-size: 30px; }

方案二：不修改HTML结构（仅元素居中，非整体） #

如果不想调整HTML结构，可以给右侧三个元素添加align-self: center，让每个元素在各自的网格行里垂直居中，但这种方式下，右侧元素是分散在三个网格行中的，并非整体居中，且网格行的高度依然会被「One」拉伸：

.two, .three, .four {
  align-self: center;
}

为什么方案一更好？ #

方案一将右侧元素作为一个整体处理，不管「One」的高度如何变化，右侧容器都会和「One」垂直居中对齐，同时内部的三个元素保持自身高度、间距均匀，完全避免了拉伸问题，视觉上也更符合「整体居中」的需求。

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