仅允许CSS网格中的一部分行自动缩小

Question

鉴于堆栈由一个主类别和一个子类别组成，第一个（子类别）具有标题。

标题行从其他行继承其高度。 如何使标题的高度自动缩小？

我试图为“ group-header”类设置height：CONSTANT，但没有任何改变。

我还尝试更改“ group-header”类的“ display”属性，但事实并非如此。

#container {
  display: grid;
  grid-template-rows: repeat( auto-fill, minmax(50px, 1fr));
  grid-row-gap:10px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.row {
  background: rgb(248, 249, 55);
}

.group-header {
  background: rgb(48, 149, 215);
}
img {
  height:36px;
}

<div id="container">
  <div class="row group-header">Sub Group Header</div>
  <div class="row">row1 <img /></div>
  <div class="row">row2 <img /></div>
  <hr/>
  <div class="row">row1 <img /></div>
  <div class="row">row2 <img /></div>
  <div class="row">row3 <img /></div>
  <div class="row">row4 <img /></div>
</div>

我们需要页眉高度适合绿线，而不适合红色：

Answer 1

您要通过将auto设置为行高来更新CSS网格模板属性

#container {
  display: grid;
  grid-template-rows: repeat( auto-fill, minmax(auto, 1fr));
  grid-row-gap:10px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

#container {
  display: grid;
  grid-template-rows: repeat( auto-fill, minmax(auto, 1fr));
  grid-row-gap:10px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.row {
  background: rgb(248, 249, 55);
}

.group-header {
  background: rgb(48, 149, 215);
  
 
}
img {
  height:36px;
}

<div id="container">
  <div class="row group-header">Sub Group Header</div>
  <div class="row">row1 <img /></div>
  <div class="row">row2 <img /></div>
  <hr/>
  <div class="row">row1 <img /></div>
  <div class="row">row2 <img /></div>
  <div class="row">row3 <img /></div>
  <div class="row">row4 <img /></div>
</div>