CODEWITHSUNDEEP
csscss-grid
Dorad
Dorad

Reputation: 3683

allow only a subset of rows inside a css-grid to auto shrink

Given a stack consists of a main category and a sub category, the first one (sub category) has an header.

The header row is inheriting its height from the other rows. How to make the height of the header to auto-shrink?

I tried to set height:CONSTANT for the "group-header" class and that change nothing.

I also tried to change the "display" property of "group-header" class but that wasn't it too.

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

We need the header height to fit the green line, not the red:

desired result

Upvotes: 0

Views: 64

Answers (1)

Mahmoud
Mahmoud

Reputation: 936

You want to update your CSS grid-template property by putting auto for line heights

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

Upvotes: 1

Related Questions