如何设置CSS Grid行高使列高度匹配内部文本高度？

嘿，我完全懂你遇到的困扰——CSS Grid默认会让所有网格项拉伸填充整个单元格的高度，所以哪怕中间列的文本高度远低于600px，它也会被强制拉到和左右列一样高。别慌，咱有几个简单的办法能搞定这个问题：

方法一：给中间网格项单独设置对齐方式 #

这是最精准的方案，只针对中间列调整，不影响左右列的固定高度。

完整代码示例 #

<div id='grid-container'>
  <div class='side-grid-item'>First column</div>
  <div id='middle-grid-item'>这里是高度不足600px的文本内容，比如只有几行文字~</div>
  <div class='side-grid-item'>Third column</div>
</div>

#grid-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 左右列平分剩余空间，中间列自适应内容宽度 */
  grid-template-rows: auto;
  gap: 15px; /* 可选，给列之间加些间距更美观 */
}

.side-grid-item {
  height: 600px;
  background-color: #f0f0f0; /* 方便直观看到列的范围 */
}

#middle-grid-item {
  align-self: start; /* 核心属性！让中间列只跟随自身内容高度，不拉伸 */
  background-color: #e0e0e0;
}

原理解释 #

align-self: start会覆盖Grid容器的默认对齐规则（默认是stretch），让中间的网格项顶部对齐，高度完全由内部文本决定，不再被迫填充整个行的高度。

方法二：调整容器的全局对齐方式 #

如果你希望所有网格项都自适应内容高度（当然你这里左右列是固定600px，所以这个方案也适用），可以直接给Grid容器设置align-items: start：

#grid-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto;
  align-items: start; /* 所有网格项都顶部对齐，高度随内容变化 */
  gap: 15px;
}

.side-grid-item {
  height: 600px;
  background-color: #f0f0f0;
}

#middle-grid-item {
  background-color: #e0e0e0;
}

为什么原来的grid-template-rows: auto没用？ #

你之前用grid-template-rows: auto时，行高会被**最高的网格项（也就是设置了600px高度的左右列）**决定，所以整个行的高度变成了600px，而中间列默认会拉伸填充这个行高。这就是为什么你看到中间列和左右一样高的原因~

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