разрешить автоматическое сжатие только подмножества строк внутри CSS-сетки

Question

Учитывая, что стек состоит из главной категории и подкатегории, первая (подкатегория) имеет заголовок.

Строка заголовка наследует свою высоту от других строк.Как сделать, чтобы высота заголовка автоматически уменьшалась?

Я пытался установить высоту: CONSTANT для класса "group-header", и это ничего не меняет.

Я также пытался изменитьсвойство «display» класса «group-header», но это тоже не так.

#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-шаблона сетки, установив 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;
}

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