-1

I was expecting that setting grid-template-rows to fr will make that row to expand to fill all available space but in my case it is not doing it anyway. In other words below code must have resulted in three rows first and third of which are as thin as their content while second row fills the all remaining space in between. Tried it both on my local machine and codesandbox and am getting the same result

html:

 <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

css:

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.item {
  border: 1px solid red;
}
esentai
  • 69
  • 1
  • 10

1 Answers1

0

Yes, 1fr will expand the 'item' element to fill available space, but it will not influence it parent's height. If I understood your question correctly You should set the height of your parent element to 100% to achieve the desired result.

Maciej Pietrek
  • 16
  • 2