css - 只允许 css-grid 中的一部分行自动收缩

Question

给定一个堆栈由一个主类别和一个子类别组成，第一个(子类别)有一个标题。

标题行继承了其他行的高度。 如何让header的高度自动收缩？

我尝试为“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

您想通过为行高设置自动来更新您的 CSS grid-template 属性

#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>