Grid列间行元素对齐问题求助：内容高度不均致标题错位

你当前的问题出在嵌套Grid的结构：外层Grid划分5列，每一列内部又单独做Grid布局，导致每列的行高是独立计算的——内容短的列行高更小，自然对应位置的Heading无法和其他列对齐。

要实现所有列的对应内容水平对齐，核心是让所有行的高度由全局最高的内容决定，而不是每列单独计算。最简单的解决方式是把整个布局改成一个5行×5列的大Grid，直接将每个内容元素放在外层Grid中，而非嵌套子容器。

修改后的CSS代码 #

.grid-container {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, auto); /* 每行高度自动适配该行最高内容 */
}

.grid-item {
    background-color: #f5f5f5;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 12px;
}

修改后的HTML代码 #

<div class="grid-container">
  <!-- 第一列 -->
  <div class="grid-item">Heading</div>
  <div class="grid-item">Heading</div>
  <div class="grid-item">This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.</div>
  <div class="grid-item">Heading</div>
  <div class="grid-item">1.List 2.List 3.List</div>
  
  <!-- 第二列 -->
  <div class="grid-item">Heading</div>
  <div class="grid-item">Heading</div>
  <div class="grid-item">This div contains a very long word.</div>
  <div class="grid-item">Heading</div>
  <div class="grid-item">1.List 2.List 3.List</div>
  
  <!-- 第三列 -->
  <div class="grid-item">Heading</div>
  <div class="grid-item">Heading</div>
  <div class="grid-item">This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.</div>
  <div class="grid-item">Heading</div>
  <div class="grid-item">1.List 2.List 3.List</div>
  
  <!-- 第四列 -->
  <div class="grid-item">Heading</div>
  <div class="grid-item">Heading</div>
  <div class="grid-item">This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.</div>
  <div class="grid-item">Heading</div>
  <div class="grid-item">1.List 2.List 3.List</div>
  
  <!-- 第五列 -->
  <div class="grid-item">Heading</div>
  <div class="grid-item">Heading</div>
  <div class="grid-item">This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.</div>
  <div class="grid-item">Heading</div>
  <div class="grid-item">1.List 2.List 3.List</div>
</div>

补充说明 #

如果需要保留每列的整体容器（比如给整列加统一样式），可以让每列容器跨5行，同时通过subgrid继承外层Grid的行定义：

.grid-container {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, auto);
}

.grid-column {
    display: grid;
    grid-template-rows: subgrid; /* 继承外层Grid的行高规则 */
    grid-row: span 5;
    background-color: #f5f5f5;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 12px;
}

这种方式可以保留你原本的嵌套HTML结构，同样能实现对应内容对齐，注意subgrid需在现代浏览器环境中使用。

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