CSS Subgrid无法在父Grid列间保持一致宽高问题求助

你的核心问题在于每个column是独立的网格容器，导致内部subgrid无法跨列对齐行高。要实现所有box在4列间宽高统一，需要让整个布局的行结构在最外层container上统一定义，再通过subgrid让子容器继承这个行结构。

修正后的代码 #

CSS #

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 定义3行：header行 + subgrid的2行 */
  grid-template-rows: 30px auto auto;
  gap: 10px;
}

.column {
  display: grid;
  /* 继承container的行结构 */
  grid-template-rows: subgrid;
  /* 跨container的3行 */
  grid-row: span 3;
  gap: 5px;
}

.header {
  background-color: lightblue;
  text-align: center;
  /* 固定在column的第一行（对应container的header行） */
  grid-row: 1;
}

.subgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 继承column的第2、3行（对应container的subgrid行） */
  grid-template-rows: subgrid;
  grid-row: 2 / span 2;
  gap: 5px;
}

.box {
  background-color: lightgreen;
  border: 1px solid black;
  /* 可选：让内容自动换行，避免撑破布局 */
  word-wrap: break-word;
}

HTML #

<div class="container">
  <div class="column">
    <div class="header">Header 1</div>
    <div class="subgrid">
      <div class="box">asd</div>
      <div class="box">ads</div>
      <div class="box">ad</div>
      <div class="box">asd</div>
    </div>
  </div>
  <div class="column">
    <div class="header">Header 2</div>
    <div class="subgrid">
      <div class="box">asd</div>
    </div>
  </div>
  <div class="column">
    <div class="header">Header 3</div>
    <div class="subgrid">
      <div class="box">asd</div>
    </div>
  </div>
  <div class="column">
    <div class="header">Header 4</div>
    <div class="subgrid">
      <div class="box">asd</div>
      <div class="box">asd</div>
      <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Maximus dolor, inquit, brevis est. Nescio quo modo praetervolavit oratio. Quis hoc dicit? Summus dolor s</div>
    </div>
  </div>
</div>

关键改动说明 #

• 统一外层行结构：在container中定义grid-template-rows: 30px auto auto，明确整个布局的3行结构（header行、subgrid第一行、subgrid第二行）。
• column继承行结构：column使用grid-template-rows: subgrid和grid-row: span 3，让自身的行完全对齐container的行。
• subgrid绑定到统一行：subgrid通过grid-row: 2 / span 2占据column的第2、3行，同时用grid-template-rows: subgrid继承这两行的高度，确保所有列的subgrid行高一致。
• 移除冗余高度设置：删除header的height:30px，直接通过container的行高控制，避免冲突。

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