如何避免Grid布局中固定高度的heading-tab被右侧list拉伸高度

问题原因 #

你使用的grid布局容器.container默认align-items属性值为stretch，会自动让同一行的所有grid子项高度统一拉伸到和最高子项一致，所以右侧列表高度更高时，左侧的heading-tab会被同步拉伸，你设置的固定高度height:72px会被这个默认行为覆盖。

修复方案 #

你可以二选一实现效果：

• 方案1：给.container添加align-items: start属性，让所有grid子项按自身设定高度顶部对齐，不会被拉伸：

.container {
  display: grid;
  grid-template-columns: 294px auto;
  /* 新增以下代码 */
  align-items: start;
}

• 方案2：单独给heading-tab添加align-self: start属性，仅控制该元素不被grid拉伸：

.heading-tab {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 72px;
  width: 294px;
  border-top: 1px solid lightgrey;
  /* 新增以下代码 */
  align-self: start;
}

修改完成后左侧heading-tab会固定保持72px的设定高度，完全不受右侧列表高度变化影响。

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